Stylish Social Sharing Widget Below Every Post For Blogger

About The Widget

"Increase the social presence".These are the words that you might be hearing from all the people or articles related to website traffic.A lot of people are their on social sites,so most people recommend to utilize the social sites to increase your traffic.And the best way to promote your blog on social media site's is the social sharing widgets.And the best place to add the widgets is below the posts,because only after reading the post visitor's judge whether this blog should be subscribed or not.So here I will provide you an tutorial to add a awesome,attractive and stylish social sharing widget to your blog.

Steps To Add It:-

• Go to Template Tab Of Your Blog
• Click On Edit Html Button
• Search for:- <data:post.body/> or post-footer-line post-footer-line-1 and add the following code above it:-

<section class="technopcarea-newsletter">
<h2>
Bored Of Checking For New Posts
</h2>
<div id="form-technopcarea-newsletter">
<div class="technopcarea-social facebook">
<a href="https://www.facebook.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/RbZgdq2.png" />
    </a>
    <iframe allowtransparency="true" class="technopcarea-social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTechnoPcArea&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="technopcarea-social twitter">
<a href="https://twitter.com/TechnoPcArea" target="_blank">
      <img src="http://i.imgur.com/0A1kead.png" />
    </a>
    <iframe allowtransparency="true" class="technopcarea-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=TechnoPcArea&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="technopcarea-newsletter-form">
<fieldset>
<h2>
      Why don't you get them all 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=TechnoPcArea', '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="TechnoPcArea" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
input { font-family:arial; }
h2 {font-family:arial; }
.technopcarea-newsletter{text-align:center;margin:20px 0;}
.technopcarea-newsletter .technopcarea-social.facebook{background:none repeat scroll 0 0 #3661A0}
.technopcarea-newsletter .technopcarea-social{padding-top:20%;width:20%;float:left;position:relative}
.technopcarea-newsletter #form-technopcarea-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.technopcarea-newsletter:before,.technopcarea-newsletter:after{content:&quot; &quot;;display:table}
.technopcarea-newsletter:after{clear:both}
.technopcarea-newsletter h2{color:#3B434D;font-family:Sniglet;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.technopcarea-newsletter .technopcarea-social.twitter{background:none repeat scroll 0 0 #00ACED}
.technopcarea-newsletter .technopcarea-social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.technopcarea-newsletter .technopcarea-social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.technopcarea-newsletter .technopcarea-social a:hover img{transform:scale(1.1)}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box{bottom:20px;left:50%;position:absolute}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.fb-like{margin-left:-45px}
.technopcarea-newsletter .technopcarea-social .technopcarea-social-box.twitter-follow-button{margin-left:-30px}
.technopcarea-newsletter .technopcarea-newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.technopcarea-newsletter .technopcarea-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:11px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".technopcarea-newsletter #form-technopcarea-newsletter").width() * 0.025; // 10% of container width
    $(".technopcarea-newsletter .technopcarea-newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

• Replace all the highlighted facebook,twitter and feedburner usernames with your facebook,twitter and feedburner usernames.

Final Words

This awesome social sharing widget is to placed below posts.It's attractiveness and stylization is too good and I am also using it on my blog.It doesn't affects the blog's loading time too much.If you face any problem in adding the widget or in customization than comment below.Also if you liked the widget or you want to give any suggestion for the improvement of the widget than comment below.