5+ Stylish and amazing Subscription Form Widget For Blogger

Subscribers and followers are the life of a site. Users who subscribe to a site or blog are real loyal followers. Those who subscribe to your site usually come regularly on your site. So it is very important to have email subscription box on your site or blog.It also help you to send updates to your subscribers in their inbox without doing any effort and they always stay updated. This will increase traffic and also increase loyal followers. So today we are going to talk about a very important topic that is Email Subscription Box.

Adding To Blogger

Go to Design > Page Elements.
Click Add A Gadget.
In Add A Gadget window, select HTML/JavaScript .
Copy the code below and paste it inside the content box.
Save the gadget.
Drag the gadget and re-position it under Blog Posts gadget.
Click Save button (top right hand corner).

Adding To WordPress

Go to Dashboard > Appearance > Widgets > Available Widgets.
Drag Text widget into a sidebar.
Paste in the code.
Save.

Awesome Social Media Sharing And Subscribing Widget For Blogger

- Code Here
- - <style> /* Computer funs Social Widget */ #BTSNTS-mashable-bar { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } .fb-likebox { background: #fff; padding: 10px 10px 0 10px; border: 1px solid #D8E6EB; margin-top: -2px; height:65px; } .googleplus { background: #F5FCFE; border-top: 1px solid #FFF; border-bottom: 1px solid #ebebeb; border-right: 1px solid #D8E6EB; border-left: 1px solid #D8E6EB; border-image: initial; font-size: .90em; font-family: "Verdana","Helvetica",sans-serif; color: #000; padding: 9px 15px; line-height: 1px;} .googleplus span { color: #000; font-size: 11px; position: absolute; display:inline-block; margin: 9px 70px;} .g-plusone { float: left;} .twitter { background: #EEF9FD; padding: 10px; border: 1px solid #C7DBE2; border-top: 0;} #mashable { background: #EBEBEB; border: 1px solid #CCC; border-top: 1px solid white; padding: 2px 8px 2px 3px; text-align: right; border-image: initial;} #mashable .author-credit {} #mashable .author-credit a { font-size:10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration:none;} #email-news-subscribe .email-box{ padding: 5px 10px; font-family: "Verdana","Helvetica",sans-serif; border-top: 0; border-right: 1px solid #C7DBE2; border-left: 1px solid #C7DBE2; border-image: initial; height:35px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Verdana","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Verdana","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background: #ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFFFFF; text-shadow:#d08d00 1px 1px 0} #other-social-bar { background-color: #D8E6EB; box-shadow: 0 1px 1px #FFFFFF inset; padding: 5px; font-family: "Verdana","Helvetica",sans-serif; font-weight:bold; overflow: hidden; border: 1px solid #B6D0DA; height:35px; } </style>   <div style="margin-bottom:10px;"> <div id="BTSNTS-mashable-bar" > <div class="fb-likebox"> <div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/cmpfun" data-width="280" data-height="88" data-show-faces="false" data-stream="false" data-header="false"></div></div><div class="googleplus"> <span>Recommend Us!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter">  <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&lang=en&link_color=&screen_name=Computerfuns&show_count=&show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div><div id="email-news-subscribe"> <div class="email-box"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Computerfuns', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Your Email Here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /><input type="hidden" value="computerfuns" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="subscribe" name="commit" type="submit" value="Subscribe" /></form></div></div><div id="other-social-bar"><div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_preferred_6"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f22ed8a16c66e93"></script></div></div></div>

Some Little Changes

Now replace Cmpfuns with your facebook fanpage username.
Replace Computerfuns with your twitter username.
Replace theseComputerfuns two usernames with your feedburner username.

Stylish & Cute Subscription Form

Most of times peoples want simple, clean subscription form for their WordPress and Blogger/blogspot Blogs,so computerfun represent the Stylish and Cute Subscription

Code Here

<style>
.abt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgozsu84lS4wHiSmeD0TyWA6SJpBdKsaTq6enBn1aKgWW9hOla473ILc_WZWnAtIl99piSM-p0nUDvRpQRUv2rKaroLB7PIthQj-z6M5lqYDp90gAn-ffWw9ZdQ9Ubnl8BJjskeuHZLUQ4/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class='abt-email'>
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Cmpfun.blogspot.com', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="cmpfun.blogspot.com" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Submit" type="submit" />
</form> 

</div>

Now make these changes,
Now replace cmpfun.blogspot.com with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
Replace cmpfun.blogspot.com with your feed title. It appear at the end of your feed link. In my case it is cmpfun.blogspot.com

Stylish Rss Feed, Facebook, Twitter, Google Plus, Email Subscription

By this widget visitor can subscribe to your blog and get update easily. To do it just follow the below steps:

- Code Here
- - <style>
    #topbox{width:250px;border:1px solid #a1a1a1;background-color:#ffffff;padding-bottom:15px;padding-top:5px;}
    #news-letter{clear:both;padding-top:10px;}
    .msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV472P9iG9JRAAWFKU4026E7AfD4puHm-nRNKWgh9D0khJuC2A6QVil6EIIvpHTjXcKHz1koJFSrcgH5FYfDYRh7XecmbW-Ce8UPQ7kpkHm3cfIE_mmrNJlMqLPuSbVefnjHYY5xv7HI/s800/mail-box.png) no-repeat;}
    .news-headline{position: relative;z-index: 999;font-size: 18px;padding-bottom:10px;font-weight:bold;}
    </style><br />
    <div id="topbox">
    <center>
    <div class="news-headline" color:="color:">
    Get Free Email Updates
    </div></center>
    <center>
    <table border="0">
    <tbody>
    <tr>
    <td style="padding-right: 4px;"><a href="http://twitter.com/sr-site" target="_blank" title="Follow Me On Twitter">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jXAvxv0iyCZk3Kau80DyjZQh-vnq8flXkc0GpQoBEmdkuCXAcj7tNncWEncsb2t5jtKYd4RiA5Xb8i6lhQmDW7cBaktAHMXq0uIGqQ_r7FsrlJyAWHAM1XoC8KxBg1eksO_zcujw3Ys/s1600/sr-site.com-twitter-icon.png" style="height: 25px; width: 25px;" /></a>
    </td>
    <td style="padding-right: 4px;"><a href="http://feeds.feedburner.com/sr-site" target="_blank" title="Subscribe Via RSS">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb_7Y2oI5EGNZ6e8Wxje1nQEuGoJYbBJ5KnzXr4Xq2IY28_L8qKEpxw7n1canjHpGi3W9KRpRbFIev478u93xAEMUvs4pTPGx88ySsMxo3SWyVbYbrzWZ-Cy_TMSOK4FLpKPiZ3eUq5Uo/s1600/sr-site.com-rss-icon.png" style="height: 25px; width: 25px;" /></a>
    </td>
    <td style="padding-right: 4px;"><a href="http://www.facebook.com/sr-site" target="_blank" title="Find Us On Facebook">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPfV4EySs2HQgQIY0BYLzHWKun6Xhyu2LRTX_DTfEZPf4t4fruJujJivpRHWw9mQb7pCWL5ffpX5vVPcSmsMXBEaZSDhfada56VZ1f6YfWHVsmhCDPqkbVkmpktnGJdUMFzYVjDQUUlv8/s1600/sr-site.com-facebook-icon.png" style="height: 25px; width: 25px;" /></a>
    </td>
    <td style="padding-right: 4px;"><a href="https://plus.google.com/107955298793879607964" target="_blank" title="Add me on Google+">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_1r1_ZRE0BiS1LeEZgsJPrb_O-og8rT7XRFGRkWdWDzh-Gz7eRVCyGSZnlZ_4CaBtNH4jLlG4KMikEm78pvZdyG_zjT0iMPToFw3wRQxeH5Rl8rL7trH6bnAF-OnlRDhUYwv7b4qSLYU/s1600/sr-site.com-google-plus-icon.png" style="height: 25px; width: 25px;" /></a>
    </td>
    <td style="padding-right: 4px;"><a href="http://youtube.com/username" target="_blank" title="Add To Technorati">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCWAo9SIqB7DgOYpqpJnZzItg-JR4dL7CiXauTILwq3l7k0ItgZWwsWmk_uvc5EkxdlMdLGvyfMWaFscZTE_xaJxCLFR6RWUIIoMp46cDEjPF3ThbZojGH2hPUob47RGGL4vqOWLUx-GM/s1600/sr-site.com-youtube-icon.png" style="height: 25px; width: 25px;" /></a>
    </td></tr>
    </tbody></table>
    </center>
    <div id="news-letter">
    <span class="msg-box"></span>
    <b>Sign up for newsletter</b>
    <br />
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sr-site', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    <input class="ebutton3" gtbfieldid="2" maxlength="100" name="email" onfocus="this.value = '';" size="25" style="color: #333333; font-size: 11px; height: 21px; width: 130px;" type="text" valign="middle" value="Enter your email address" />
    <input name="uri" type="hidden" value="sr-site" />
    <input name="loc" type="hidden" value="en_US" />
    <input class="ebutton2" id="submit" style="font-size: 11px;" type="submit" value="Send" />
    </form>
    </div>
    </div>
    <div class="clear">
    </div>
    <br />
    <div class="clear">
    </div>

Google+ Style Subscription Box

- Code Here
- - <div class="subscribe_outer">
    <div class="subscribe_wrapper">
    <p>Subscribe Updates, Its FREE!</p>
    <div id="btntEmailsub">
    <form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=computerfuns', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="computerfuns" name="uri">
    <input type="hidden" value="en_US" name="loc">
    <input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=''"name="email">
    <input class="emailButton" type="submit" value="Signup Now!" title="">
    </form>
    </div>
    </div>
    </div>
    <style>
    
    .subscribe_outer {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMTxerlkRL_tV8Ltm0K3dseTUSPwTL5Q_iG03cmheEKMRhBV9upwwGvbJ8ULjY_lotwNVSHqq9MwkKiZdeu0osvdJSnUz-ypkO1VVKmkETDQ_33Salx16PaLhxOLHoTwa_ldATpYRb-k/s1600/color-chronicl.gif") repeat scroll 0 0 transparent;
        margin: 0 -10px;
        padding: 5px 0;
    }
    .subscribe_wrapper {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9oO2BwuLPFYZEpQfmBgAedk2QP3UIpzWHJ8kq5Jcnig-J5kvtCor2OSF1F8c7z_0dsTPrFvqK4y7V-L_Ybk5U5n8gGr8DEGhVf4CAV427Q4iDA0K7N9oldd6nkO-KCA4P6ZFIEPlSWzI/s1600/pattern-chronicl.png") repeat scroll 0 0 #333333;
        color: #CCCCCC;
        font-size: 15px;
        font-weight:bold;
        line-height: 20px;
        padding: 10px 50px 18px 38px;
    }
    .emailButton {
        background:#249334;
        border: 0 none;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        padding: 10px 40px;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
        width: 100%;
    }
    .emailText {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFoXYRucsz4PnbY-r1lTNqcA6ZCvyMGgzf9UMDEiwKAak2LfxLDDiEbPRd203thK8ijARadDbjJ4H9uVbLKX9hJJY-yDfTNUMN34__7ECZeathqqTZYBUhJUGxOg8thV8NMJNkj_KOXXM/s1600/email.png") no-repeat scroll 10px center #FFFFFF;
        border: 0 none;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
        color: #444444;
        padding: 10px 40px;
        margin: 0 0 15px;
        outline: none;
        text-decoration: none;
        width: 70%;
    }
    input, textarea {
        font-family:'Lora',georgia,serif;
    }
    .subscribe_wrapper {
        color: #CCCCCC;
        font-size: 14px;
        line-height: 20px;
    }
    .emailButton {
        width: 300px;
    }
    .emailButton {
        background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
        border: 0 none;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        padding: 10px 40px;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
        width: 100%;
    }
    </style>

Hover Style Email Subscribe Box:

- Code Here
- - <style>
    .tbisubscribe {
    border: 1px solid #D3D3D3;
    padding: 8px;
    width: 300px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    .tbisubscribe:hover {
    -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
    }
    .tbimailbox {
    border: 1px solid #D3D3D3;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
    -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
    color: #666;
    font: 14px "trebuchet ms", sans-serif;
    padding: 7px 15px;
    width: 160px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    .tbimailbox:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    .tbisubmit {
    font: bold 12px Tahoma, Geneva, sans-serif;
    font-style: normal;
    color: #ffffff;
    background: #ff5714;
    border: 0px solid #ffffff;
    text-shadow: 0px -1px 1px #222222;
    box-shadow: 2px 2px 5px #000000;
    -moz-box-shadow: 2px 2px 5px #000000;
    -webkit-box-shadow: 2px 2px 5px #000000;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    padding: 8px 15px;
    cursor: pointer;
    margin: 0 auto;
    }
    .tbisubmit:active {
    cursor: pointer;
    position: relative;
    top: 2px;
    }
    .tbisubmit::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
    }
    </style>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    <div class='tbisubscribe'>
    <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
    <div style='margin: 10px 0 0 6px;'>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
    method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=computerfuns', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
    style='margin: 0pt;' target='popupwindow'>
    <input name='uri' type='hidden' value='computerfuns' />
    <input name='loc' type='hidden' value='en_US' />
    <input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
    onfocus='if (this.value == "Enter your email...") {this.value = ""}'
    type='text' value='Enter your email...' />
    <input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
    </form>
    </div>
    <div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
    <div style='margin: -32px 0 0 120px;'>
    <a href='http://www.facebook.com/cmpfun' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cbneI_SY1SDVFDG05QZ73ssy8KMxIpDWoxvtthY0mnGJb1m5JOGhQb8sgBhAoTjqe0DqqGzakUKbk26bw3T7pyOuvHnRVALogSw-tF0P-XjpwQyOduNhwNzxCg4_GREBUFekki14l5Y/s1600/facebook500.png' alt='facebook'/></a>
    <a href='http://www.twitter.com/vhowtodo' rel='nofollow' target='_blank'
    title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz3McfBHXFg7A5xK8nMxNYxFC4Mi0YOpr-uj1QfPk3L4Veht3QNm2b5GHnFRVJC_S867i6OfhFU2vPo2fUvByx-HRoJRQMWKqN9qbrkcB6R1wD8SoF1yQuQkep-w7o-liffy4jB7VzH74/s1600/twitter.png' alt='twitter'/></a>
    <a href='http://plus.google.com/+sonamathews' rel='nofollow' target='_blank'
    title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaGTLMwNN6IV-M1M-nle8rAcG3egxpTdq8nU2wWIVvjtblL0tyAJsApP1NmZLh0wz4of5-c-_83KYx3Fx7nOiA8gqnrJQvWlLA6kc8gRRznFhMv0ZiTY22pOnbpu6RWQuKb3RG5AB6-vE/s1600/googleplus-revised.png' alt='gplus'/></a>
    <a href='PINTEREST URL' rel='nofollow' target='_blank'
    title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6lkbvD0-d_9U6lzEbWFQ4_jk14wrWFsvng58ApzACOgVnN48PIkkwkmdAbu_h1zKM-_efLuoWJGOW-LT7N6T1PENa9gOlH05p6qJCcfzW-9KDf4Y_aX4URrt0D8gFyc7KYhlS_PI8Q2Y/s1600/pinterest.png' alt='pinterest'/></a>
    <a href='RSS URL' rel='nofollow' target='_blank'
    title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m6x5FHbT78weatWCvJ3v49LWwxUUa1rfgUn3la6hRIwSngmjSYKUKbux-slSMC1buaELjFe26gJVl9-8l0pGdqbFI_LirrgHs2hltKH8bM0C9Edn6Qu9sgbYsv0w2b_WVGoQyHY6FIs/s1600/rss.png' alt='rss'/></a>
    </div>
    </div>

One Time Popup Email Subscription Box for Blogger:

How to Add One Time Stylish Popup Email Subscription Box ?
Login to Blogger.com
Go to "Template".
Click on "Edit HTML".
Search for </head> in the template.
Paste below code just above the </head> in template.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Click on Save.
Now Go to "Layout".
Click on "Add a gadget".
Add HTML/Javascript gadget.
Open HTML/Javascript and paste the code,

- Code Here
- - <style>
    
    #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background-color: transparent;       background:rgba(0, 0, 0, 0.5);z-index:999; }
    
    #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:350px; width:500px; background:#FFFFFF; border:4px solid #ddd; z-index:999; padding:8px; font-size:13px; }
    
    #popupContactClose{    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzODG5dcGDFnHVy0tbAtq_oWi5P9d_NDN6E76CIQbY7NYGZKCKEkXZki2FFbk5TpXnc3bQ9RsQDzJH2_CLp3ZtluvdLz3i6O5BEwj6w05DtoiC5TW_9qSPWaTGoWG4Cn46_4m6N2zLz7x/s1600/close.PNG) no-repeat;    width:25px;    height:29px;    display:inline;    z-index:3200;    position:absolute;    top:-15px;    right:-16px;    cursor:pointer;    text-indent: -99999px;}
    
    #description {    color: #AAAAAA;    font-family: times New Roman;    font-size: 25px;    font-style: italic;    line-height:30px; }
    
    #description img {    float: left;    height: 80px;    padding: 0 25px 0 10px;    width: 80px; }
    
    #btntfollowForm { padding: 15px; }
    
    #btntfollowForm img { border:none; }
    
    #btntfollowForm p { margin: 0 0 10px;}
    
    #btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 10px;        margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box;   -moz-box-sizing : content-box;       box-sizing : content-box; -webkit-border-radius: 3px;    -moz-border-radius: 3px;         border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear;    -moz-transition: all 0.2s linear;      -o-transition: all 0.2s linear;   transition: all 0.2s linear; }
    
    #btntfollowForm input:not([type="checkbox"]):active,
    
    #btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;         box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;}
    
    #btntfollowForm .button input{    background: none repeat scroll 0 0 #3D9DB3;    border: 1px solid #1C6C7A;    border-radius: 3px 3px 3px 3px;    box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2;    color: #FFFFFF;    cursor: pointer;    font-family: 'Arial Narrow',Arial,sans-serif;    font-size: 24px;    margin-bottom: 10px;    padding: 8px 5px;    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);    width: 30%;    float: right; }
    
    #btntfollowForm .button input:hover{    background: #4ab3c6; text-decoration: none; }
    
    #btntfollowForm .button input:active,
    
    #btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87);   -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;    -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;         box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
    
    .btntFollowFooter { color:#222; text-align: center;    font: 10px Tahoma, Helvetica, Arial, Sans-Serif;    padding: 7px 0;    margin-top: 80px;    text-shadow: 0px 2px 3px #555;    position: absolute;    width: 500px; }
    
    .btntFollowFooter a {    color: #222;    text-decoration: none; }
    
    .btntFollowFooter a:hover {    color: #fff; }
    
    
    
    </style>
    
    <div id="backgroundPopup">
    
    <div id="popupContact">
    
    <a href="" id="popupContactClose">x</a>
    
    <div id="btntfollowForm">
    
    <img alt="Subscribe" border="0" float="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij69EokPI00wvRHPmKnopfIWvv-MWNYcB1GMpONZyMKzq_wd0TtRG8D3Ncior4mkASjsIouBek3BsE1wroX3otj7kNkcphnHIPMQlU_wdo-kqfbazHkQhv6xKKHX2r0N4nz9ip0jHeAsC4/s1600/Subscribe+Via+Email.PNG" />
    
    <div id="description">
    
    <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeMAizqrvv76y_CVbl6901PndAHo4y49yas8p3Of651mPV4p-Hd6YDXBGP2aLZ_hW2sH-1nfJuJgxjGZEk_nNvyWBY4NTPusuGuCI69O_cmQ7AP_5ABchLHG3sSSwe3fhU0ypVWOd4iZb/s1600/Mail.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
    
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=computerfuns', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
    
    <input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="computerfuns" /><input name="loc" type="hidden" value="en_US" />
    
    <div class="button">
    
    <input type="submit" value="Subscribe" /></div>
    
    </form>
    
    </div>
    
    <div class="btntFollowFooter">
    
    Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.cmpfun.blogspot.com/" rel="dofollow" target="_blank">Computer Fun</a></div>
    
    </div>
    
    </div>
    
    <script src="http://yourjavascript.com/24315621361/jquery.cookie.js" type="text/javascript">
    
    </script>
    
    <script type="text/javascript">
    
         var popupStatus = 0;
    
    //this code will load popup with jQuery magic!
    
    function loadPopup(){
    
        //loads popup only if it is disabled
    
        if(popupStatus==0){
    
            $("#backgroundPopup").fadeIn("slow");
    
            $("#popupContact").fadeIn("slow");
    
            popupStatus = 1;
    
        }
    
    }
    
    //This code will disable popup when click on x!
    
    function disablePopup(){
    
        //disables popup only if it is enabled
    
        if(popupStatus==1){
    
            $("#backgroundPopup").fadeOut("slow");
    
            $("#popupContact").fadeOut("slow");
    
            popupStatus = 0;
    
        }
    
    }
    
    //this code will center popup
    
    function centerPopup(){
    
        //request data for centering
    
        var windowWidth = document.documentElement.clientWidth;
    
        var windowHeight = document.documentElement.clientHeight;
    
        var popupHeight = $("#popupContact").height();
    
        var popupWidth = $("#popupContact").width();
    
        //centering
    
        $("#popupContact").css({
    
            "position": "absolute",
    
            "top": windowHeight/2-popupHeight/2,
    
            "left": windowWidth/2-popupWidth/2
    
        });
    
        //only need force for IE6
    
        $("#backgroundPopup").css({
    
            "height": windowHeight
    
        });
    
    }
    
    //CONTROLLING EVENTS IN jQuery
    
    $(document).ready(function(){
    
        if ($.cookie("anewsletter") != 1) {
    
            //centering with css
    
            centerPopup();
    
            //load popup
    
            loadPopup();
    
        }
    
        //CLOSING POPUP
    
        //Click the x event!
    
        $("#popupContactClose").click(function(){
    
            disablePopup();
    
            $.cookie("anewsletter", "1", { expires: 7 });
    
        });
    
        //Press Escape event!
    
        $(document).keypress(function(e){
    
            if(e.keyCode==27 && popupStatus==1){
    
                disablePopup();
    
                $.cookie("anewsletter", "1", { expires: 7 });
    
            }
    
        });
    
    });