How to Add Email Subscription Box Below Every Post In Blogger

Hello Friends, today I am sharing an amazing and beautiful email subscription and social network buttons widget for blogger blog. In this article you will come to know that How to Add Subscription Box and Social Network Buttons below post titles in Blogger blog. Email Subscription help you to increase your blog subscriptions by which you can ge more traffic and can increase your pagerank. Social media is a great power now a days, almost every blogger wants to get more and more traffic from social media. So knowing the Importance of these today I am writing an Article about Adding Subscribe Box Widget  Below each post in Blogger.

(Just See a Demo Here)

How to Add Subscription Box Below Posts in Blogger:

• Login to your blogger account.
• Select Template and click on Edit HTML.
• Then search for <div class='post-footer-line post-footer-line-1'>
• Paste following code just below it and save the template.

<style>
.bbt-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #ccc;
color:#444444;
background-color:#fff;
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px
#fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px
#fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0
17px 0 -11px #c2c0b8;
}
ul.bbt-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.bbt-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.bbt-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.bbt-subboxbutton{
background:#f8f8f8;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.bbt-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.bbt-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.bbt-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.bbt-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.bbt-subboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.bbt-subboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.bbt-subboxbutton{
padding:8px !important;
}
.bbt-subboxemailform, .bbt-subboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class='bbt-subboxv2'>
<div class='bbt-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='bbt-subboxemailform' method='post' onsubmit='window.open
(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Best-Blogger-Tricks&apos;, &apos;popupwindow&apos;,
&apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Best-Blogger-Tricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bbt-subboxinput' 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 class='bbt-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='bbt-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/Best-Blogger-Tricks'><img src='http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png'
title='Subscribe us'/></a>
</li><li>
<a href='http://twitter.com/ItsGhani'><img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Follow
us'/></a>
</li><li>
<a href='http://facebook.com/pages/Best-Blogger-Tricks/691903110868897'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-
xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='https://plus.google.com/+MuhammadUsmanGhani'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-
7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>

Customization:

• Replace all Best-Blogger-Tricks with your Feedburner user name.
• Replace ItsGhani with your Twitter username.
• Replace pages/Best-Blogger-Tricks/691903110868897 with your Facebook username.
• Replace +MuhammadUsmanGhani with your Google Plus username.

Congratulations:  you have successfully added beautiful subscription box widget below posts in blogger. Still if you have any query feel free to ask below. :)

Allah Hafiz till next Post!