Social Sharing Widget for Blogger Post

Follow @dhavalkuku

This Post is about How to Add Social Sharing Widget in Blogger Post. In this tutorial I am gonna explain, how to add it to begin or end of blogger post. By using this widget, you can share your social networks with  one click. It means, you can get some visitors to your blog if someone do sharing.So you can easily share your content within the social sites and increase your traffic to your blog. I am using HTML and Some JavaScript.
This is also widget like you have see the other social widget in older post.

• Notification Bar Widget to Blogger
• Hover Style Social Media Widget for Blogger

Demo

I try it for a long time but in every time I have the long editing in template but it is simple code which gives the Amazing Social Widget to Post.Widget as shown in picture.

STEPS:

• Log in to your blogger account and goto to "Template" link which you will find on your site dashboard sidebar.
• After that Click On "Edit HTML" Button.
• Find this tag by using CTRL+F   <data:post.body/>
• Paste Below code before <data:post.body/> tag.

<!-- Start of Social Widget by http://blogtrixz.blogspot.in/ -->

<center>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<table border='0'> 
<tr> 
<td><a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/dhavalkuku'>Follow @dhavalkuku</a>
<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></td>
  <td><div style='padding-top:6px; padding-left:10px;'> 
<script type='text/javascript'> 
tweetmeme_style = &quot;compact&quot;; 
</script> 
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> 
</div></td>
<td> 
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/> 
</td>
<td><div style='margin-left:35px;'> 
<script type='text/javascript'> 
(function() { 
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0]; 
s.type = &#39;text/javascript&#39;; 
s.async = true; 
s.src = &#39;http://widgets.digg.com/buttons.js&#39;; 
s1.parentNode.insertBefore(s, s1); 
})(); 
</script> 
<a class='DiggThisButton DiggMedium'/> 
</div></td>
  <td> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogtrixz&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90&amp;appId=159872777520139' style='border:none; overflow:hidden; width:50px; height:90px; padding:40px 0 0 70px;'/>
</td> 
</tr> 
</table> </b:if>
</center>
<!-- Ending of Social Widget by http://blogtrixz.blogspot.in -->

• After creating the significant changes save the Template and You are done.

Now you can see that Social Widget is appear after the Every Post of your Blog..
You can also Add This widget After the Post by adding the same code after the tag.Any problem related to this post then please give the query.

Follow @dhavalkuku