Adding a Cool Email Subscription Widget Below Every Posts in Blogger

After a long time, here we are back with a cool email subscription widget, which can be placed right below all your posts. As you all know, placing a email subscription widget below each and every posts of your blog can certainly increase your email subscribers. Moreover it gives your blog a classic look.

If you browse blogs regularly, then surely you may have seen a similar widget in WordPress blogs. Yes, this widget is inspired from a WordPress plugin. Whatever, as far as we know, no one has released a similar widget for blogger blogs. Anyway, the widget looks more attractive than our older version and has some social profile buttons below the form, which enables the users to follow you via social networking sites too...

Adding the Email Subscription Widget Below Every Posts

1) Go to your blogger dashboard > Template > Edit HTML

2) Using Ctrl+F, search for ]]></b:skin> and paste the below code above it.

#newsletter { background:#202020; padding:20px; margin-bottom:40px;}
#newsletter h3 {
    margin:0 0 10px 0;
    color:#fff;
    font-size:28px;
    font-weight:normal;
    font-family: 'BitterRegular';
}
#newsletter h4 {
    margin:0 0 10px 0;
    color:#76b320;
    font-size:16px;
    font-weight:normal;
    font-family: 'BitterRegular';
}

#newsletter input {
    width:32%;
    height:22px;
    line-height:22px;
    font-size:12px;
    color:#a1a1a1;
    border:none;
    margin:0 5px 20px 0;
    padding:5px 10px;
}

#newsletter input.sign {
    color:#fff;
    font-family: 'BitterRegular';
    cursor:pointer;
    height:26px;
    width:70px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTVZIOhbDHAcrCOq9ow1dAfMZMyp_GSSM7rfsO_yV0ie6r_29f8WdgNA7u_wNp9IpfrYRDe2XfbTalb6lHNooKtYXZpZ1pphjP24-H5zOFgLbavE-Lea2bZspnhaX_L18fKFt2w5dDks7/s1600/signup-bg.png) left top no-repeat;
    margin-left:5px;
}

#newsletter #lettersocial {
    padding:15px 0 0 0;
    border-top:1px dashed #fff;
}

#newsletter #lettersocial a {
    font-size:13px;
    color:#999999;
    height:16px;
    line-height:16px;
    margin-right:15px;
}

#newsletter #lettersocial a img { vertical-align:middle;}

#newsletter #lettersocial a:hover { text-decoration:none;}

3) Now search for  <data:post.body/> and paste the below code below it:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="newsletter">

                        <h3>Enjoyed this post?</h3>

                        <h4>Be sure to subscribe to get regular updates delivered to your email inbox, for free...</h4>

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tweaks123', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

    <input class="name" id="newslettername" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Name" />

    <input class="email" id="newsletteremail" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" id="newsletteremail" type="text" value="Email" />

    <input name="uri" type="hidden" value="tweaks123" /><input name="loc" type="hidden" value="en_US" /> <input class="submit sign" type="submit" value="Submit" /></form>

      <div id="lettersocial">

                            <a href="http://feeds.feedburner.com/tweaks123" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNzdkpdAIrXkI7fno110J5MhKXv-076qsaf0RTon90pfRZ2tSJZYU0jYldqTrI_Y4nfl6RMCDMI6P9jvJRzsXypEqE8cQ93IZ0A1jL1BvTFYd0ZKljuJnlX6ddfDCBZUdDW5IwUKFQWRWS/s1600/icon-rss.png" alt="" /> Subscribe</a>

                                                    <a class="twitter popup social-icons" href="https://twitter.com/#!/bloggergarage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjve72pTAUYjedPAR2V_4lcnXHLv0fztI7SKnX9am-oCT3ST4nkbQsOvB1EOEY9-yCT1SlWnMyYTv6x5woH5V_avh3d-z8x1mxolPTElIFPYrln4EDSwScBhn3WCTHtsLt-qS6JHw16gg17/s1600/icon-twitter.png" alt="" /> Follow</a>

                            <a href="http://facebook.com/bloggergarage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRty__itzqmbYveAyzdhm3vHqe2sp95rwAwpjmPsoES2-AfLV4tXMfgkGL_V3V40dWPevDTUz48ZdA-7pdDuEYa6vlua_6gqJote4LqFp-HwFGAxo-KhP4UdgrRf8Dn93eYYFQkPWOlivN/s1600/icon-facebook.jpg" alt="" /> Like</a>

                            <div class="clr"></div>

                        </div>

                    </div> 
</b:if> 

4) Click the orange 'Save' button.

Customization

• Replace #202020 with a suitable color code to change the background color.
• Replace tweaks123 with your feedburner Id.
• Replace the URLs of social networking sites with your own profile links.

That's all we have for you today. Now just move on to your blog and navigate to any of the posts and you can see the widget right below your post. And at last sorry for being inactive for several days, it was due to my exams and all. That's it, take care for now, will meet you tomorrow with our next post!