Clean Social Subscribe Widget for Blogger

SOCIALIZE IT

Tweet

0

Hello bloggers, I am here again with a new blogger widget. This one is 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.

How to add Clean Social Subscriber to blogger:

First and foremost you need to add the code. First go to BLogger Dashboard → 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/YourTBox" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfbkuw_r6vBLv0JeasGTkqhDN7Uxqnar72AXzct6XLfcGPtkKG8dX9shzKgINX5ZNf3vMokjhq_YiNClAW6iShne8wUhXGw7akZ8n2LFNNUdFIz21yd6JoTBLKb8DHloXIWc1SEPFEt6P/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%2FYourTBox&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/YourTBox" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ToX522xN-cG8sS6uMhYKQZCaQDtjIZ4M4_zxixeaYBmIeztt547JaWt2JlfNkEC4YlcG-_5bnkOPjlY-ReQm1xFbWMBTcbAXxVXJy-ZrFoYoaN39fzwoaSzcXIPPcBtvIGmBDDQ0s_R1/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=YourTBox&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=YourTBox', '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="YourTBox" />

<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>

Customizing the code:

Now, Change YOURTBOX  to your own facebook, twitter and feedburner URLS.

Congratulations! this amazing widget is installed in your website and ready to attract your user. Please Like and Share. If you face any problem, don't hesitate to ask just ask in the comment section.

Do You Like This Post ?