Social Media Sharing Widget V2 for Blogger

Hey Friends you have seen social media share widget I have been using just below the posts title of my post. So now it's time for you to use this widget in your blog's posts. Well I have not done so much of customization here. I just had used very simple CSS properties to give it a minimal and elegant look. Let's proceed to our tutorial now

Step#1

• Open Blogger Dashboard → Template → Html Editor
• Search for below code in your template.

Html

<div class='entry-header'>

Or

<div class='post-footer'>

• Now add below given code just after the above code.

Html

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-this'>
<h3 class='share_it'>Socialize Us</h3>
<div class='stumble-button' style='float:left;padding:3px 0% 5px 0;margin:0 2% 0 0;'>
<su:badge layout='1'/></div> 
<div class='fb_button' style='float:left;padding:3px 2% 5px 0;'>
<fb:like font='' href='' layout='button_count' send='false' show_faces='false'/></div>
<div class='gplus_share' style='float:left;padding: 3px 1.5% 5px 0;margin: 0 0% 0 0%;'>
<span class='g-plus' data-action='share' data-annotation='bubble'/>
</div>
<div class='gplus_this' style='float:left;padding:3px 5px 5px 0;width:13%'>
<div class='g-plusone' data-size='medium'/>
</div>
<div class='twit_button' style='float:left;padding:3px 0% 0px 0;width:15.5%'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='trackmyblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
</div>
</b:if>

• Now search for </head> and add below code just before it.

Javascript

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;
    li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//platform.stumbleupon.com/1/widgets.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

• After you have done by adding script code add the following CSS code in your templates skin. i.e. before ]]></b:skin>

Css

#share-this {
background: transparent;
float: left;
width: 94%;
margin: 2% 2% 5% 2%;
padding: 10px 0 3px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;

}

.share_it{
float: left;
padding: 0% 5% 0 1%;
color:#414141;
text-shadow: 1px 1px 0px rgba(241, 241, 241, .5);
}