Clean And Neat Social Subscibe Widget for Blogger/Blogspot

Hi,Today iam going to tell you how to add the Beautiful Social Subscribe Widget for Blogger.Just follow the steps given below to add this widget.

Preview image of this widget:

Steps to add widget on blogger.

1. Goto blogger dashboard --> Template--> Edit HTML.

2. Now Search for the Following Piece of code. (Press Ctrl+F For Easy Search)
      <data:post.body/>

3. Now paste the Below Given code Just Above the <data:post.body/>

Note: there may be More than 1 <data:post.body/> So be sure you have selected the right one.If widget does not works try changing to different <data:post.body/>

<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/AVvXsEgANfVLyDgNEmnles0J2OiFGi5yfluydmUUhAMtJJzZLaNZyGx7S3DE_y95fbfJy6odk07XBhdJXr6lfs7El8jYv7An6JRG6b77ESDbwDYEJr4DA0Oxh-E5kUQ28RHWJV9CR8kmPRPMYNLV/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%2FGoBloggerTricks&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/gobloggertricks" target="_blank">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEGtAlRk0cj7GWYRRepXXK433vLlYJAwiln-6FPMt3LzPk4flWWK_u4xDPsPe6dyQVrS1ztGtcqc8anZZuHVE5T-S6MWBjIN9bFjNWF-KuTnCQuN02eQpGM0IAdQSKZdhyphenhyphennVlJfea9hBF/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=gobloggertricks&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=gobloggertricks', '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="gobloggertricks" />          <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>

4. Now save the Template

That's it.You are Done.