UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add Subscription Box With Social Icons Below Blog Posts?

Every blogger wants to grow his subscribers list and build huge fan base and subscribers. Everyone is not successful with it. Do you know one of the reasons? it is placement of subscription box.

If you put subscription post under a post then there are higher chances of making the visitor subscribe to your blog. The visitor comes at the end of the post only after reading it and enjoying it. If he finds that ''Get more such articles in your inbox'' at the end with subscription box, then there are higher chances of making him/her subscribe.

In this way it will also helps in providing good exposure to your blog on outer social networking websites. In this tutorial we will discuss about adding a social subscription box below posts in blogger blogs.

Instructions To Follow:

1. Go to Blogger Dashboard→Your Blog
2. Template→Edit HTML
3. Now Search <div class=’post-footer-line post-footer-line-1′>
4. Paste Following Code Just Below It and Save The Template.

Source Code:

<style>
.wc-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.wc-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.wc-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.wc-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.wc-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;
}
.wc-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.wc-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.wc-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.wc-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.wc-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;
}
.wc-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;
}
.wc-subboxbutton{
padding:8px !important;
}
.wc-subboxemailform, .wc-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='wc-subboxv2'>
<div class='wc-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='wc-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YourFeedURL Here&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YourFeedURL Here'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='wc-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='wc-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='wc-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/YourFeedURL Here'><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/YourTwitterURL Here'><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/YourFacebookPageURL Here'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='Paste Your Google Plus Link Here'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>

Attention! Do You Know How To Customize This Plugin ?

•  In the following code replace red color code with your social network addresses,and see your blog now.

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below.

Peace and blessings buddies. :)

Success Message : Hi Blogger! You have successfully install this plugin to your blog.