Stylish Social Sharing Widget For Blogger Blog

No doubt that social media sites plays viral role to build blog readership and improve traffic instantly. Generating killer content for readers is not enough for blog success. What we need is that our readers share our content on these most popular worldwide sites like Facebook and twitter.

To achieve this goal first thing we can do is providing social sharing buttons to the readers in our post so that they can easily share our content with more audience without and hassle. There are lot of social media sharing buttons available in the blog-o-sphere but they are not so attractive and eye catching that can encourage readers to share our content. So, today I bring a very stylish and fancy share buttons with twitter and Facebook  This gadget is surely works to increase your fan base on major social media sites and help you to gain natural back links to grow your blogging business. So, let’s play the game. Find more widgets here.

Add Social Media Buttons to Blogger

To add this powerful social sharing widget in your blog you have to perform below steps.

1. Go to Blogger >> Edit HTML >> Expand Widget Templates.


2. Now press Ctrl+F and search below code in your template.

]]></b:skin>

3. Now paste below code just before/above it.

/*--- Social Buttons by www.BloggerTipsTricks.com --- */
ul.share li.twitter {
width: 140px;
height: 40px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_XhnWEHztb8hLvfIISP8VE1PV0cV84QlexGjnw7mb9YFC6X7C7BsGCXXQCbrQZZA_QxjEBQfwQ1xeyRuc6keSXGzR4xo8QW0au31Pbv_LJxjp__Bb29He1gm8DOgy4qgpXh6tVHAMqpa/s1600/share-twitter.png) no-repeat scroll 0 0;
padding: 52px 0 0 14px;
}
ul.share li.facebook {
width: 128px;
height: 40px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-EXZVnlGwbGqhexIjhbccmJpWM2nXUOVgxYNR4ApxmMLA6BBv94Eh-3GPF-hg7OOINEAEeHyxPBPM0nm7_bZ1ds85S09I0aG4Xm19QITgIYiVtF2m9__6f17AjBFo3auDY4elnKwCgUwP/s1600/share-facebook.png) no-repeat scroll 0 0;
padding: 51px 0 0 17px;
}

4. Now search this piece of code in your template.

<data:post.body/>

5. And paste below code just after it.

<ul class="share">
<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement (s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</li>

<li class="facebook">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1amp;appId=357975364299768";
  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</li></ul>

6. Save the template.


7. You are done!

Congratulation! Now you have successfully added a brand new social sharing widget in your blog.

Final Words!

This was all about how to add fancy social sharing widget below every post in blogger. Add this widget into your blog and see a significant growth in your fan base. It will not only help you to bring new audience to your blog but also you gain exposure to your blog. Join our conversation below. Happy Blogging!

Author - This gadget is fully developed by Ankit Kumar Singla. He is a professional blogger currently running his own blog on Blogger Tips and Tricks. He has posted many quality tutorials about Blogger Widgets and Plugins. Visit his blog to know more about him.