Add 'All in one Subscription widget' below posts in Blogger ~ Crawlist

Random designed subscription widget mostly fail to do what it for (getting more email subscriber, and social media sites fan) Because those subscription box ain't that attractive and not designed that well. So I wanted to make a subscription widget what will match to any template and site type with easy social media fan building process (only one click) like my other social subscription widget it doesn't contains any social media icon it contains social media profile's direct options, with more cool feedburner email subscription widget. This All in one subscription widget integrates with Facebook like button, twitter follow button, Google plus follow and recommendation button. I didn't put any more profile to optimize this widget to load faster also this widget don't use any images it reduces Http request (built with Css, Css3, html, scripts). It easy to configure too and add to blogger difficulty level is beginner. So let's see how it looks like and how to add it in your blogger blog.

Add 'All in one Subscription widget' below posts in Blogger

Preview-

Live Demo- (Click here)

Step 1: Backup your template (Optional step)

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">

<div class="g-plusone" data-size="medium"></div>

<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">

<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/112348536843820788771" data-rel="author"></div>

<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

So what your thought about this widget don't forget to leave a comment, I hope it will expose your social media fan and boost your email subscription. Goodluck :)

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu

Add 'All in one Subscription widget' below posts in Blogger

Add 'All in one Subscription widget' below posts in Blogger

Popular Posts

Labels