Clean Social Subscribe Widget for Blogger

Posted On // 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!

52 comments

Umer Prince Author
20 May 2014 at 10:15

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

Reply
21 May 2014 at 17:55

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

Reply
22 May 2014 at 11:52

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

Reply
24 May 2014 at 05:17

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

Reply
12 June 2014 at 09:55

its clean and Attractive widget thanks....

http://www.truetricks.net

Reply
Sudheer Yadav Author
13 June 2014 at 15:51

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
17 July 2014 at 12:02

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

Reply
Pawan Patidar Author
7 October 2014 at 12:15

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

Reply
Awais Ahmed Author
18 October 2014 at 11:39

Not working need you help please

Reply
4 November 2014 at 13:13

Awesome Earn Money

Reply
Ali Abbas Author
9 November 2014 at 13:51

good website. keep it admin,

please visit www.mybloggertricksnow.net

Reply
16 November 2014 at 16:46

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 14:40

Very cool!

Reply
Rayhan Islam Author
19 December 2014 at 17:29

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 14:54

Thanks for sharing.. Keep it up.

Reply
Rupam RD Author
10 January 2015 at 19:02

Its working fine...thanks

Reply
Techshoutme Author
27 January 2015 at 14:20

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 14:03

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

Reply
SULEMANKHADRI Author
3 April 2015 at 09:36

sor how to add adsence in my blog

Reply
Malik Author
7 April 2015 at 17:25

I have used it in my blog

Reply
Rahul Yadav Author
26 April 2015 at 21:27

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 13:50

Thanks. very cool widget for blogger

Reply
Post Adder Author
3 June 2015 at 22:23

Very Informative Site ALL Blogger Tricks

http://www.largetutorialhub.tk/

Reply
Zallegiance Author
16 June 2015 at 21:14

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

Reply
Lester Author
26 June 2015 at 19:23

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
3 July 2015 at 12:24

nice tips guys, thanks you help me :-)

Reply
eBloggerTimes Author
11 July 2015 at 11:44

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 20:42

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

Reply
22 July 2015 at 11:50

i want social buttons like yours

Reply
srini vas Author
11 August 2015 at 21:24

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
20 September 2015 at 05:48

Hello Everyone!

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

Reply
Rex Hacker Author
11 October 2015 at 23:23

Thanks for sharing with us.
Free Download Full Version Software

Reply
25 January 2016 at 17:02

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 21:50

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

Reply
22 February 2016 at 11:06

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 21:18

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

Reply
12 March 2016 at 16:13

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

Reply
Yusuf Author
19 March 2016 at 18:37

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

Reply
Kuch Jano Author
9 April 2016 at 03:01

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

Reply
autocad Author
25 May 2016 at 13:37

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

Reply
5 July 2016 at 23:00

Awesome brother. It is great.

Reply
21 July 2016 at 03:02

Terima kasih sudah berbagi ilmu keren ini!

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

Reply
Amezing Tech Author
12 August 2016 at 21:26

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

Reply
8 October 2016 at 18:39

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

Reply

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

Reply
Prakash Author
26 November 2016 at 13:59

Thanks for sharing bro! very good article!

Reply
Amnash Author
20 January 2017 at 13:13

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.

Reply
Abid Jamal Author
6 February 2017 at 00:48

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

Reply
24 March 2017 at 10:03

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

Reply
17 April 2017 at 00:13

http://www.tsgeniecivil.download/

Reply
priya Author
29 April 2017 at 18:19

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

Reply
Haresh Author
19 October 2017 at 12:54

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

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 |