Brand New Social Sharing Widget For Blogger

Social Media sites like facebook and twitter are considered as the great resource of free and targeted traffic. We should not ignore them if we want serious results through our blogging. Our blog posts holds great part of success of our blog because as we all know that content is king. Delivering great and original content can help us to achieve our blogging goals but writing unique content is not enough if there is nobody to read it. We have to promote and share our content on these social media sites so that visitors come to our blog and read what we have written for them. To share the content social sharing buttons widget plays a vital role but they are not so attractive to encourage the readers for sharing the content. So, today I came with a very stylish and brand new social media sharing widget that surely encourages the readers to share our content. It will help to increase blog page views by promoting our content among the new audience. So, let see how to add this fancy social sharing widget in blogger.

Add Social Media Share Buttons to Blogger

Perform below steps to add this brand new social media share buttons in your blogspot blog.

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 http://road2-blogger.blogspot.com/ --- */
ul.share li.twitter {
width: 140px;
height: 40px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgseNMxpIMdYf6sv6DYfUZeLVyNhvdcbCz0N8JBrwKI4qhzn59BJnJfERu0nS9O0ZvQflVJETN2GNHp6pP9bf9S7OO0caRdi1gbmcEirtFfcv-7JAUyg98T6jI7rbYQ7fB7klrfcTB_LvkT/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/AVvXsEhrJzF-SXq9qbQoxHz4j44gIUUA5hCCwJ6g1kKXD8jbyTRpvHovHFReCk3xAOyz6B3_oPg8O8jU8ZuhFwqAP50ggk12rpOdLwRUEjtj92Gg-IMoKE_IHiDXQShyphenhyphenqkDPav51RVryGht0Z1O4/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!

Share on Facebook Share on Twitter Share on Google Plus

About Unknown