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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEQf-UVsXjgXMAoTIN7HE-oAZikp_tXNFL5NdP0gZEZH85_t6J2Xrcgr9UMxxYwIhEoGz55KBZeHXdB353vN2rIMl1MH5X7I48gzIKOcEd0Lpp6e00yXl-n_DPSwM6mg89Gdeu2xF_-y-/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&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj30Yhwbc01vQK-bRjxSN2aG9RKecKsttfmDgMZh4Y3LHpycNeUyB6AIJe7P40Ilv0x8MQnXKeo_ek07AH7cJoA6UOS00GOLus4sw0SY2u2b3pwoF_m_RdKjlMltPFOoR-HU9FoItCXuqC/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&id=twitter-widget-0&lang=en&screen_name=AllBloggerTrick&show_count=false&show_screen_name=false&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)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</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:" ";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!
