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.





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!

53 comments:

  1. Hmm! Its a nice and super clean social widget - Keep it up :)

    ReplyDelete
  2. Bro Awesome Keep It Up But Can You Tell Me Code With Google Plus Too It Would Be Great Help Thanks IN Advance

    ReplyDelete
  3. Cool! thanks a lot for sharing this widget. Keep up posting Tiny Serval

    ReplyDelete
  4. awesome widget bro.....can't wait to start using this on my blog
    http://orbasportal.blogspot.com

    ReplyDelete
  5. its clean and Attractive widget thanks....

    http://www.truetricks.net

    ReplyDelete
  6. I AM A BIG FAN OF YOUR BLOGGING KEEP IT AND ALSO TELL ME HOW CAN I GET MORE TRAFFIC ON http://www.guruofmovie.com

    ReplyDelete
  7. thank u............. cute.

    ReplyDelete
  8. Thanks for sharing this blogger tricks i will use this code on my blog

    ReplyDelete
  9. good website. keep it admin,

    please visit www.mybloggertricksnow.net

    ReplyDelete
  10. Hi dhiraj, this is nice and decent, there is something I want to say but not in public, could you put your mail do I can send my queries to you.

    Devendra M
    Geekdk.com

    ReplyDelete
  11. That's really nice and clean Social Subscribe widget. Thank you very much for this nice share.

    ReplyDelete
  12. Thanks for sharing.. Keep it up.

    ReplyDelete
  13. hello bro thanks for giving cool widgets
    i use blogger default template. so this widgets suitable for me

    ReplyDelete
  14. Awesome widget I have successfully installed in my blog www.sorathemes.com

    ReplyDelete
  15. sor how to add adsence in my blog

    ReplyDelete
  16. I have used it in my blog

    ReplyDelete
  17. This is an awesome widget. But I wanted to use this widget to pop up on my blogger. Can you help how to pop up this widget, if possible with timer.

    ReplyDelete
  18. Thanks. very cool widget for blogger

    ReplyDelete
  19. Very Informative Site ALL Blogger Tricks

    http://www.largetutorialhub.tk/

    ReplyDelete
  20. cool thanks for sharing.....i like it

    ReplyDelete
  21. Have always been terrified to edit thing related to html on the blog template as I am afraid it will mess up the whole blog layout. But after reading your post with clear instructions, will definitely give it a try. Any tips on adding drop down menus?

    ReplyDelete
  22. nice tips guys, thanks you help me :-)

    ReplyDelete
  23. Wow vey clean social subscribe widget thanks for sharing i will use it now on my blog http://www.ebloggertimes.com/

    ReplyDelete
  24. Nice widget. I am sure of using it on my blog and share with my friends

    ReplyDelete
  25. i want social buttons like yours

    ReplyDelete
  26. Nice widgets,
    But Currenly I use GetSiteControl (http://bit.ly/1HE30nT) it includes share, subscribe and more, it has nice reporting option so on I loved it.

    ReplyDelete
  27. Hello Everyone!

    i apply this to my blog to Thanks! http://www.mybloggertools.com/

    ReplyDelete
  28. Hi. please how do I reduce the size as its not properly re-sizing to fit in my mobile template. my site is www.friendsmade.net

    ReplyDelete
  29. very nice sir, Thanx for sharing(http://goo.gl/QiY27s)

    ReplyDelete
  30. One of the reasons many businesses don’t comply with health and safety legislation is that they don’t have the necessary routines and forms which allow them to take care of a lot of their compliance but http://www.highvisibilitywhs.com/ have the best quality service.

    ReplyDelete
  31. I'm sorry allbloggertricks.com, i need a backlinks, please help me :)

    ReplyDelete
  32. Nice widget. Maybe i'll use it if i get bored with the older one :v

    ReplyDelete
  33. Really nice dude, keep it up and thanks to share.

    ReplyDelete
  34. Appreciate you sharing, great blog article.Thanks Again. Awesome widget

    ReplyDelete
  35. Terima kasih sudah berbagi ilmu keren ini!

    Boyke membagikan rahasia tidak cepat keluar => www.foredisurabaya.net

    ReplyDelete
  36. great i just installed it on my blog you can cheak it on DD Freedish DTH

    ReplyDelete
  37. Thanks ABT ! This is totally awesome. Ii integrated it on my site and my blogs even more better, elegant and super .
    Check Here and Subscribe for more Tech Updates, Gadgets, Smartphone and more .
    http://www.nepalilab.blogspot.com

    ReplyDelete
  38. Thanks for sharing bro! very good article!

    ReplyDelete
  39. Cool! thanks a lot for sharing this.
    https://pcretricks.blogspot.in/
    http://tec-clashzz.blogspot.in/


    This Blogs also done with codiblog help and tips.

    ReplyDelete
  40. i added this in to my blog www.electronicslovers.com

    ReplyDelete
  41. Thank you for sharing in this article Obat Perangsang Wanita I can learn a lot and could also be a reference

    ReplyDelete
  42. http://www.tsgeniecivil.download/

    ReplyDelete
  43. cool thanks for sharing.....i like it

    ReplyDelete
  44. Great bro! it awesome for my blog. Thanks for sharing!

    ReplyDelete
  45. That's really nice and clean Social Subscribe widget. Thank you very much for this nice share. Thanks Again.

    ReplyDelete
  46. its not working correctly on my blog. could you check it? www.dopetechs.com

    ReplyDelete