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

Add 'All in one Subscription widget' below posts in Blogger
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-
Add 'All in one Subscription widget' below posts in Blogger

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 == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=crawlist&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=500&apos;);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
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 :)

3:46 AM | Labels: , |

This entry was posted on 3:46 AM and is filed under blogger , widgets . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)