Clean Social Subscribe Widget for Blogger

Posted On // 41 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">
<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="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/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="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/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!

41 comments

Umer Prince Author
19 May 2014 at 21:45

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

Reply
21 May 2014 at 05:25

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

Reply
21 May 2014 at 23:22

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

Reply
23 May 2014 at 16:47

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

Reply
11 June 2014 at 21:25

its clean and Attractive widget thanks....

http://www.truetricks.net

Reply
Sudheer Yadav Author
13 June 2014 at 03:21

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

Reply
Vishnu Prasad Author
16 July 2014 at 23:32

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

Reply
Pawan Patidar Author
6 October 2014 at 23:45

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

Reply
Awais Ahmed Author
17 October 2014 at 23:09

Not working need you help please

Reply
3 November 2014 at 23:43

Awesome Earn Money

Reply
Ali Abbas Author
9 November 2014 at 00:21

good website. keep it admin,

please visit www.mybloggertricksnow.net

Reply
16 November 2014 at 03:16

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

Reply
12 December 2014 at 01:10

Very cool!

Reply
Rayhan Islam Author
19 December 2014 at 03:59

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

Reply
Faisal khan Author
7 January 2015 at 01:24

Thanks for sharing.. Keep it up.

Reply
Rupam RD Author
10 January 2015 at 05:32

Its working fine...thanks

Reply
Techshoutme Author
27 January 2015 at 00:50

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

Reply
Ayesha Batool Author
29 March 2015 at 01:33

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

Reply
SULEMANKHADRI Author
2 April 2015 at 21:06

sor how to add adsence in my blog

Reply
Malik Author
7 April 2015 at 04:55

I have used it in my blog

Reply
Rahul Yadav Author
26 April 2015 at 08:57

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.

Reply
Neha saraf Author
19 May 2015 at 01:20

Thanks. very cool widget for blogger

Reply
Post Adder Author
3 June 2015 at 09:53

Very Informative Site ALL Blogger Tricks

http://www.largetutorialhub.tk/

Reply
Zallegiance Author
16 June 2015 at 08:44

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

Reply
Lester Author
26 June 2015 at 06:53

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?

Reply
GantengMax Author
2 July 2015 at 23:54

nice tips guys, thanks you help me :-)

Reply
eBloggerTimes Author
10 July 2015 at 23:14

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

Reply
20 July 2015 at 08:12

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

Reply
21 July 2015 at 23:20

i want social buttons like yours

Reply
srini vas Author
11 August 2015 at 08:54

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.

Reply
19 September 2015 at 17:18

Hello Everyone!

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

Reply
Rex Hacker Author
11 October 2015 at 10:53

Thanks for sharing with us.
Free Download Full Version Software

Reply
25 January 2016 at 03:32

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

Reply
6 February 2016 at 08:20

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

Reply
21 February 2016 at 21:36

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.

Reply
8 March 2016 at 07:48

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

Reply
12 March 2016 at 02:43

Great widget ! thanks for sharing
5 Free tools to add Email subscription form

Reply
Yusuf Author
19 March 2016 at 06:07

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

Reply
Kuch Jano Author
8 April 2016 at 14:31

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

Reply
autocad Author
25 May 2016 at 01:07

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

Reply
5 July 2016 at 10:30

Awesome brother. It is great.

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Clean Social Subscribe Widget for Blogger |