Clean Social Subscribe Widget for Blogger

Unknown Monday, 19 May 2014 53 comments
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">
Tired of checking for new posts ?
<div id="form-newsletter">
<div class="social facebook">
<a href="" target="_blank">
      <img src="" />
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//;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;">
<div class="social twitter">
<a href="" target="_blank">
      <img src="" />
    <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=";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">
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
          js.src=p+&#39;://;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
<div class="newsletter-form">
       Get all posts directly in your mail.
<div class="fields">
<form action="" method="post" onsubmit="window.openundefined'', '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" />
.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 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;}
<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);

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!

Sharing is Caring:

53 Comments to Clean Social Subscribe Widget for Blogger Post Yours! Read Comment Policy ▼

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

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

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

awesome widget bro.....can't wait to start using this on my blog

its clean and Attractive widget thanks....


thank u............. cute.

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

Not working need you help please

good website. keep it admin,

please visit

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

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

Thanks for sharing.. Keep it up.

Its working fine...thanks

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

Awesome widget I have successfully installed in my blog

sor how to add adsence in my blog

I have used it in my blog

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.

Thanks. very cool widget for blogger

Very Informative Site ALL Blogger Tricks

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

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?

nice tips guys, thanks you help me :-)

Wow vey clean social subscribe widget thanks for sharing i will use it now on my blog

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

i want social buttons like yours

Nice widgets,
But Currenly I use GetSiteControl ( it includes share, subscribe and more, it has nice reporting option so on I loved it.

Hello Everyone!

i apply this to my blog to Thanks!

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

very nice sir, Thanx for sharing(

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 have the best quality service.

I'm sorry, i need a backlinks, please help me :)

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

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

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

Awesome brother. It is great.

Terima kasih sudah berbagi ilmu keren ini!

Boyke membagikan rahasia tidak cepat keluar =>

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

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 .

Thanks for sharing bro! very good article!

Cool! thanks a lot for sharing this.

This Blogs also done with codiblog help and tips.

i added this in to my blog

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

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

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

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

its not working correctly on my blog. could you check it?