ProBlogger Like Email Subscription Widget For Blogger

In one of our earlier posts, we have shared with you a cool eye-catching email subscription widget. Which was simply an eye-catching one as the title says. Today we have something different from that, a classic email subscription widget with feedburner chicklet, Facebook button and a twitter button placed in it. The widget is something similar to that present in the ProBlogger blog. Basically the subscription form used in the widget present in problogger is aweber's and we have converted it to feedburner subscription form. If you wish to add this to you blog the you can follow the below steps to do so...

Adding ProBlogger Like Email Subscription Widget

Step 1: Move on to your blogger dashboard >> Layout >> Add a Gadget:

Step 2: Now from the list select 'HTML/JavaScript'.

Step 3: Now paste the below code into it and click the orange save button.

<style>
#bgemailsub .subcount{margin:3px 0 0 0;float:right;}
#bgemailsub h5{color:#FFFFFF;font-size:16px;font-weight:bold;margin:0 0 5px 0;text-decoration:none;text-shadow:#2F4249 1px 1px;text-transform:none;line-height:20px;} #bgemailsub img{margin:0 5px 5px 0;}
#bgemailsub #text-8 img{margin:3px 5px 2px 5px;}#bgemailsub #text-10 img{margin:5px 5px 10px 0;} #bgemailsub .textwidget p{margin:0;padding:0;}
#bgemailsub .subscribe{background:#74868C;width:240px;margin:10px 0 0 0;padding:10px 15px 10px 15px; z-index:99;}
#bgemailsub .subscribe-line{margin:0;padding:10px 0 10px 0;text-align:center;clear:both;}#bgemailsub .text_input, #bgemailsub .subscribe input.email{background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4KYVNpommG77uBkWwmVtXX9eqiwBSBCff9-1mM5UmZEyalOI3hv86ST9juGDE19E8St9DmlRkVHc83kjjXWglpqE6Cn8jwqEi_PUnC5fbPUDg1Giq6sdZODdB3JqXKJseWzvuCxGJygD/s1600/subscribe-icon.png) left no-repeat;width:208px;color:#333333;font-family:Arial,Tahoma,Verdana;font-size:13px;padding:5px 0 4px 30px;margin:5px 5px 10px 0;border:1px solid #C5CFD5;}

</style>


<div id="bgemailsub" class="bgemailsub widget-area">
<div id="text-9" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><div class="subscribe">
<h5>Subscribe to the Newsletter:</h5>
<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                <input class="text_input" type="text" value="Enter your email address …" id="subbox" onfocus="if ( this.value == 'Enter your email address …') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Enter your email address …'; }" name="email" />
                <input type="hidden" name="uri" value="tweaks123" />
                <input type="hidden" name="loc" value="en_US" />
             <input id="zoosbmt" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibju7dC_CgAv5hJYBM1khYIP1zVc4c31YixkXtZgvvLmbjr-SV6xlAxr5fNaLDrIrUFQWiUQ7AxoyQoGWcqGMHOftPa9Xxj8-G1m09M8x5v46TN9n40Ey1IXTZ7tvDAhkILUdRSy-zTSv0/s1600/subscribe-button.png" alt="Subscribe" class="subbutton"/>

<a href="http://feeds.feedburner.com/tweaks123"><img src="http://feeds.feedburner.com/~fc/tweaks123?bg=333333&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" class="subcount"/></a>
</form>
<div class="subscribe-line">
<a href="http://feeds.feedburner.com/tweaks123"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzTHyC3TdK-CgU-WRWX2guh5MI_ZigabDYSIBs_kd3P_efw8DpKVcNQVpARzXd-wRxx9XfPBadyEslcKt8Rp0sl7DE6i4AmxijR3C3hhbMAyDgF_wm5mYpZ_L3o4BfSUhjCIaBmbUAMhsq/s1600/subscribe-rss.png" alt="Subscribe to RSS"/></a><a href="http://www.facebook.com/BloggerGarage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpb7DWW1s8BWdrPJr1nQsCZ1pSQAkIzO2TrPFTK51TkVCsYYh5GO2E-P7zpOoziOAnZqfY2j_QFpjLb2R0iHobqdSMl8-OoCPdXM8ygoo3VWuuPsXSMsJ-4LrUEI38aZdCpY-JBFizr7vJ/s1600/subscribe-facebook.png" alt="Subscribe to Facebook"/></a><a href="http://www.twitter.com/bloggergarage"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg17Tmcgh0QnVgObQHoWiifPqndia4YVAryCIEV-lQ09jMcXS_AAQ6bvWV8QF4THTQQxd5JPZQWqmNjv9rIb3-ZAstQ0pFqsZAfhhh8cXZKz-UI0mciG6WexVSvVnnKajljMpTGI5I9LT35/s1600/subscribe-twitter.png" alt="Follow on Twitter"/></a>
<p align="center">Join Over <strong>2000</strong> Readers</p>
</div>
</div></div>
</div></div></div>

Customization

• Replace 2000 with your total subscribers count.
• Replace tweaks123 with your feedburner ID.
• Replace BloggerGarage with your Facebook ID.
• Replace BloggerGarage with your twitter ID.
• To change the background color replace #74868C. 

That's it! Now move on to your blog and you can see a stylish subscription widget hanging on there. I prefer to place the subscription form at the top of the sidebar to get the maximum. By the way don't forget to drop your comments and opinions below!