Clean Social Subscribe Widget for Blogger

Hello Readers, I am again back after a long break. This time I present you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter and Feedburner integration.

This widget has been optimized for blogs with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.

You can see the live demo of this widget below itself. Make sure to check the like button if it works and give us some likes for our Facebook Page.

Tired of checking for new posts ?

Get all posts directly in your mail.

Once you have seen the demo, to add this widget in your blogger blog you need to follow these simple steps -

Adding the code

First and foremost you need to add the code. First go to Blog Title → Template → Edit HTML. Press Ctrl. + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.

<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/AllBloggerTricks" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9aHxOw8pgDz6Bzt7akINyiXasu3Vn_8gK0FZeSG0IzkbXlbkfKMFdX9n57fJaN1ExjZoaKNQqsoNO4Lh3rLiLctu-oURM09nfwvrh7vaKvepGvrvDV7upbTKbVPszI7kx4r6W9rX7yE9K/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/AllBloggerTrick" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAPvkrsq18xH7jbQSTG2usFAjestf3JMScKKL33kLvLl8jAhEX8XRNr5nEnWP22MFOH94aNVLZ1QhrNQM8pjSXaxOfDdPimn4_xhaivXmZbrpTOeWyy36oILw0bfZhQGa7ktSqXasVwTJ/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=AllBloggerTrick&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=AllBloggerTricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="AllBloggerTricks" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

Editing the Code

After adding the above given code, you need to make some necessary changes for changing the user IDs. In the above code I have made 6 words in bold and blue, you need to change them as required.
The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to Save your Template.

Thats it, the clean social subscribe widget on your blogger blog is live and ready to attract your users. Cheers!