Add 'All in one Subscription widget' below posts in Blogger
Preview-
Live Demo- (Click here)
Step 1: Backup your template (Optional step)
- Log in to your blogger, select your blog,
- Select template option, click 'backup/restore' from upper right corner.
- Download full template and save it on Hard-drive
Step 2: Embedding the code (Mandatory step)
- To embedding codes, Go to 'Template' tab
- Select 'Edit Html' and find (using Ctrl+F or Cmd+F) this line
<div class='post-footer-line post-footer-line-1'>
- If you find this line twice paste all codes under second one
Codes-
<b:if cond='data:blog.pageType == "item"'>
<style>
.ks-com-sub
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
height:130px;
width:500px;
background:#f5f5f5
}
.ks-com-sub:before, .ks-com-sub:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.ks-com-sub:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.ks-bbox {height:129px;
width:200px;
float:right;
border:#999 1px hidden;
}
.ks-bboxfb {height:27px;
width:200px;
float:right;
border:#999 1px hidden;
}
.ks-bboxtt {height:24px;
width:200px;
float:right;
border:#999 1px hidden;
overflow:hidden;
}
.ks-bboxgp {height:23px;
width:200px;
float:right;
border:#999 1px hidden;
}
.ks-bboxgf {height:25px;
width:200px;
float:right;
border:#999 1px hidden;
}
.ks-superbutton{
background:none repeat scroll 0 0 #F0553B;color:#FFF;transition:all ease 1.6s;
border:1px solid #F0553B;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:auto;
color:white;
cursor:pointer;
font-size:13px;
font-weight:bold
}
.ks-superbutton:hover{
background: none repeat scroll 0 0#000;
border:1px solid #000;
}
.ks-sub2email{
clear:both;
width:250px;
margin:10px 0;
float:left;
margin-top:auto;
}
.ks-sub2email h4
{
font:15px "Segoe UI"; font-weight:bold; margin-top:20px;
}
.ks-sub2emailform{
position:relative;
width:250px;
margin:0 auto;
margin-top:15px;
}
.ks-sub2input{
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, "Times New Roman", Times, serif;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:13px;color:#999;
margin-left:12px;
}
.ks-superbutton{
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
-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;
margin-top:-1px;
margin-right:-3px;
}
.ks-superbutton{
padding:8px ;
}
.ks-sub2emailform, .ks-sub2input{
width:97%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:34px;
}
</style>
<div class="box ks-com-sub">
<div class='ks-sub2email'>
<h4 align="right"><font color="#666">Get Blog Updates in your Inbox</font></h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='ks-sub2emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=crawlist', 'popupwindow', 'scrollbars=yes,width=500,height=500');return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-sub2input' name='email' onblur='if (this.value == "") {this.value = "Just enter your email";}' onfocus='if (this.value == "Just enter your email") {this.value = ""}' type='text' value='Just enter your email'/>
<input class='ks-superbutton' title='' type='submit' value='Subscribe'/>
</form></div>
<div class="ks-bbox">
<div class="ks-bboxfb">
</div>
<div class="ks-bboxfb">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="Place your facebook fan page link" data-width="40" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div class="ks-bboxtt">
<a href="Place your twitter profile page link" class="twitter-follow-button" data-show-count="true" data-lang="en">@Your profile name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="ks-bboxgp">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="ks-bboxgf">
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/112348536843820788771" data-rel="author"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div></div></div></b:if>
Step 3: Configure
- To configure feedburner email subscription form replace pink colored Crawlist with your feed Id.
- To configure Facebook like button replace "Place your Facebook fan page link" with your Facebook fanpage direct link. Pink colored
- To configure Twitter follow button replace "Place your twitter profile page link" with your twitter profile address. And Display Twitter name replace @Your profile name with your twitter Id
- To configure Google plus follow button replace 112348536843820788771 with your Google plus id's extension number (not renamed id name) and save template check out your Blogger blog