Email Subscription Box with Social Media Icons to add below posts

To increase subscriber numbers positioning of Subscription box is relevant for blogs. Subscription box plays a vital role to get updates directly to email box whenever posts created on blog/website. Stylish and Simple Subscription box helps visitors to check updates daily into their email box without visiting blog/website daily. Interested topics can be accessed directly from email update links received through RSS Feedburner. Here in this article we bring a Dapi Subcription box widget with Facebook, Twitter, RSS feeds icons below every post. This is the way to attract visitors and enhance number of subscribers to your blog/website. Let�s begin tutorial for adding this widget to your blog.
Sign into your blogger account
From Blogger Dashboard select �Template� code editing tab
Click on �Edit HTML� link tab and proceed
Now Search for code
<div class='post-footer-line post-footer-line-1'>

After finding copy below code and paste below to it
Note: Before your do implement on your blog better backup template if anything goes wrong you can reuse it again.
<style>
.ko-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #222;
color:#444444;
background-color:#eee;
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.ko-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.ko-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.ko-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.ko-subboxbutton{
background:#222;
border:1px solid #fff;
-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 #eee;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.ko-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.ko-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.ko-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.ko-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.ko-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;
}
.ko-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;
}
.ko-subboxbutton{
padding:8px !important;
}
.ko-subboxemailform, .ko-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='ko-subboxv2'>
<div class='ko-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates Daily <br/>to Your Email Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ko-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogtariff&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='blogtariff'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ko-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='ko-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='ko-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/blogtariff'><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/blogtariff'><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/blogtariff'><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 address 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>

Code Customization

  • Replace 'blogtariff' with your Social media IDs
Now Save Template and preview your experiment
That's done.

Related Posts