All In One Subscription Widget For Blogger Blog

Finally, I have done with this cool sharing widget. My previous articles A complete sharing widget for blogger blog and Complete subscription blog for blogger force me to share another full featured subscription widget, which can be easily add up to blogger without going through the blogger template. Its subscription features relates to twitter, Facebook, Google+ and E-mail. This sexy widget originally created by Shahbaz Malik, author and founder of this blog. In order to reduce the loading time of this widget we uses simple CSS property as jQuery affect your page loading time.So lets add this all in one subscription widget to the blog. 

Add Subscription Widget To Blog

How To Add All In One Subscription Widget To Blogger Blog:-

1. In Blogger Dashboard, Go to Design /  Page Element.
2. Choose "Add a gadget" and then select "HTML /  JavaScript".
3. Paste the following code inside it.

/* Code on http://internetricks4u.blogspot.com  */
<style type="text/css">
#abtbox
        {width:320px;
         height:100%;
         }
#smallabtbox
         {width:320;
   height:74px;
   border-bottom:1px solid #EEE;
   margin:5px 5px 0px 5px;
   margin-left:auto;
   margin-right:auto;
   }
#smallabtbox1
          {width:320;
   height:74px;
 /*  border:1px solid black;*/
     margin:0px 5px 5px 5px;
   
   }
#smallabtbox1 span
          {color: #F55;
   font-size:15px;
          margin-bottom:30px;
          padding:7px;
   font-weight:800;
   font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  }
#abtbox #smallabtbox input.mailverify
    {background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

#abtbox #smallabtbox input.joinemailupdates
         { border:1px solid #7575FF;
         border-radius:5px;
 -moz-border-radius:5px;
         background-color:#7575FF;
 color:#FFFFFF;
 font-weight:900;
 margin-left:10px;
         height:26px 
   }
</style>


<div id="abtbox"> 
<span style="margin-left:20px;color:#F90; font-weight:900;font-size:17px;margin-left:25px;position:relative;top:15px;"> Get Free Tricks Daily </span>

<div  id="smallabtbox">
<div style=" position:relative; top:30px; left:25px;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=allbloggingtricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="mailverify"  gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." />

<input name="uri" type="hidden" value="AllBloggingTricks" />

<input class="joinemailupdates" type="submit" value="Submit" /></form>

</div>

</div>
<div  id="smallabtbox1"><span><center>
Follow us on-</center></span>
 <div >
<a href="http://twitter.com/allbloggingtric"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP7Z64tmGmZNkaPLaTbFsd_GmeicbdFxFLRg2dZL0nnomv-tX4eON_NXiK-GmaZPoNEw0koCmv7pK01dceB_b5BfOgMCVQdMGIniuVtV9tnx4GFkQHaUTb8hyphenhyphenjZdp0xI6SkX6bIurio4/s1600/1.PNG" height="20" width="80" style="margin:0px 0px 0px 10px;"/></a>
 <a href="http://facebook.com/bloggingtrick">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5hp9Ry76EkXPdXu8Sj8i3Ii_NzTKlhrVYxyQFdWqMs5wjMJ2mTXGEkIV9BTBs9j-PaavH9DPEwxwhT_Qc_K-fzUWbEaH5UliMoGGKFMTGicZ-mKodEXa8TLQ4YcRgeScUSPUZ3_FFI8/s1600/facebook_logo.PNG" height="20" width="80" style="margin-left:14px;"/> </a>
 <a href="https://plus.google.com/117305698834844817404"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzSOxYqvpdMBmLyPC2zIzaXMTcsQdmKAkadwErWOy-AfPojqFLYQQ73SbNuc0rYBTkVcjVk4DAIIyjKBTQVolF1Bxb_cElHx1rFLP7aQkEaM95iS1YcUraS5_yj0h8OfinAv8EFh17FY/s1600/google_plus_logo.PNG" height="22" width="90" style="position:relative; top:5px; margin-left:20px; "/></a>
 
</div> 

</div> 
 </div>

Note:-Make Following Changes

• Replace allbloggingtric with your twitter page.
• Replace bloggingtricks with Facebook fan page URL. 
• Replace 117305698834844817404 with your Google Plus profile.
• Replace allbloggingtricks with your feedburner usename.
• Further Note that this widget will work best if your widgets of sidebar are designed to have 320px width.

I give my best in producing this widget or in writing this tutorial. Instead if anyone find difficulty in any part of this tutorial then they can contact me directly by drooping comment below.

More Article From The Same Author

• Tips To Write Killing Blog Post 
• List Of All Blog Directories