Clean Social Subscribe Widget for Blogger

Dhiraj Barnwal Monday, 19 May 2014 52 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!
Labels:
Google+ Pinterest

52 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
http://orbasportal.blogspot.com

its clean and Attractive widget thanks....

http://www.truetricks.net

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

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 www.mybloggertricksnow.net

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

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 www.sorathemes.com

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

http://www.largetutorialhub.tk/

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 http://www.ebloggertimes.com/

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 (http://bit.ly/1HE30nT) 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! http://www.mybloggertools.com/

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

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

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.

I'm sorry allbloggertricks.com, 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 => www.foredisurabaya.net

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 .
http://www.nepalilab.blogspot.com

FIGLIO DI TROIONA DANIELE MINOTTI (AVVOCATO DI RAPALLO SU FACEBOOK: NAZI, PRO MAFIA, AGENTE SEGRETO IN COPERTO DI TIPO OMICIDA) FACEVA PARTE DI SETTA DI SATANISTI STUPRA BIMBI CON GIULIANO FERRARA, ANSELMA DEL'OLIO E REGISTA ARRESTATO GIUSEPPE LAZZARI!
1
LO HANNO BECCATO UN'ALTRA VOLTA A STO SCHIFOSO SATANISTA, ANZI, A STO SATANAZISTA PEDOFILO DI DANIELE MINOTTI, AVVOCATO CRIMINALISSIMO DI RAPALLO E GENOVA (
Sede di Rapallo (GE)
Via della Libertà, 4/10 – 16035 RAPALLO (GE)
Tel. +39 0185 57880
Fax +39 010 91 63 11 54

Sede di Genova
Via XX Settembre 3/13 16121 – GENOVA)
CHE EFFETTUA ANCHE, DA SEMPRE, TANTISSIMO RICICLAGGIO DI DENARO MAFIOSO, COME ROVINA O TERMINA LA VITA DI GENTE PER BENISSIMO (ANCHE ORDINANDO OMICIDI), ATTRAVERSO COMPLOTTI MASSO-N-AZIFASCISTI, OSSIA, DI LOGGE SATANICHE DI ESTREMISSIMA DESTRA. STO VERME SCHIFOSO DI DANIELE MINOTTI FACEVA PARTE DI UNA SETTA DI PEDERASTA BERLUSCONIANI. IL CUI KAPO', E' OVVIAMENTE, IL PEDOFILO MAXIMO, IL SUO CAROGNESCO MANDANTE DI MILLE CRIMINALITA' E STALKING VIA WEB, METASTASI DI DEMOCRAZIA E GIUSTIZIA: SILVIO BERLUSCONI.

http://www.huffingtonpost.it/2015/03/26/intervista-gianni-boncompagni_n_6945522.html

http://www.giornalettismo.com/archives/104797/berlusconi-pedofilo-mafioso/

DI CUI IL NUMERO DUE E' IL SACCO STRA COLMO DI ESCREMENTI, NOTISSIMO PEDOFILOMOSESSUALE TANTO QUANTO, GIULIANO FERRARA ( LUI STESSO CONSIGLIA IL FARSI SODOMIZZARE, QUI

http://www.blitzquotidiano.it/politica-italiana/giuliano-ferrara-omosessualita-giochetto-consiglio-contro-natura-1483446/).

VOLETE ALTRE PROVE? ECCOLE QUA. IAMM BELL, IA'! LA, INVECE LEI, NOTA LESBICA, ZOCCOLONA MOGLIE DI GIULIANO FERRARA, ANSELMA DELL'OLIO ( PEDOFILISSIMA ANCHE LEI, SPESSO IN ORGE LESBO CON POCO PIU' CHE BAMBINE), IN QUESTO VIDEO CHE SEGUE

http://video.corriere.it/sesso-11enne-arrestato-regista-giuseppe-lazzari-l-intervista-rai/4287e44c-5e41-11e6-bfed-33aa6b5e1635

DAVA DEL GENIO AL SODOMIZZA BIMBI ( COME I SUOI COMPARI SATANISTI E SATANAZISTI DANIELE MINOTTI, GIULIANO FERRARA ED IL GIA' TRE VOLTE IN GALERA PAOLO BARRAI, NATO A MILANO IL 28.6.1965, DI CRIMINALISSIMA WORLD MAN OPPORTUNITIES LUGANO E WMO SA PANAMA), L' APPENA ARRESTATO PER PEDOFILIA: REGISTA GIUSEPPE LAZZARI ( PEDOFILO E NON PER NIENTE, DA SEMPRE BERLUSCONIANISSIMO... OO CHE CASO, OO).

http://brescia.corriere.it/notizie/cronaca/16_agosto_11/pedofilia-arrestato-regista-bresciano-giuseppe-lazzari-5e4ca24a-5fb2-11e6-bfed-33aa6b5e1635.shtml

Thanks for sharing bro! very good article!

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.

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

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

http://www.tsgeniecivil.download/

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

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