Brand NEW Social Share Widget for Blogger

It is amazing to see how fast widgets get transformations in style and uniqueness. We have already seen & used many kinds and styles of social sharing gadgets in our blog. And here comes another completely unique and stylish social sharing widget.

I don’t really know who actually designed this amazing widget first, but anyway i saw it first on rafaytutorials.com.  It doesn’t matter, anyway you’re reading it in here.

SEE A LIVE DEMO ON HOW THE WIDGET WILL LOOK

Share on Facebook Share on Twitter

+

-

HOW TO ADD THIS WIDGET TO YOUR BLOG

• Navigate to Blogger Dashboard > Template > Edit HTML
• Now in the template editor search for </head> and paste the below code just above it.

<script src='http://code.jquery.com/jquery-1.9.1.js'/>
<link href='https://googledrive.com/host/0B8D3MQmcZTyvZllGZW55UGhJM0k' rel='stylesheet' type='text/css'/>
<script>
function toggle(d)
{
var o=document.getElementById(d);
o.style.display=(o.style.display==&#39;none&#39;)?&#39;inline-block&#39;:&#39;none&#39;;
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;#expand-plus&quot;).toggle();
$(&quot;#expand-minus&quot;).toggle();
});
});
</script>

• Now, search for <data:post.body/>. you’ll find 2 0r 3 results. You should try pasting the below ocde just above the second <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
<a class='facebook' expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url' id='socialshare' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8' style='margin-right:8px;margin-bottom:-7px;margin-left:-5px;'/>
Share on Facebook
</a>
<a class='Twitter' expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title' id='socialshare' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM' style='margin-right:8px;margin-bottom:-5px;margin-left:-5px;'/>
Share on Twitter
</a>
<div id='expand-social' style='display:none;'>
  <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' id='google-plus' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/>
</a>
<a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url' id='stumbleupon' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>
</a> </div>
<script>
  $(&#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;).click(function(event) {
    var width  = 575,
        height = 400,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href,
        opts   = &#39;status=1&#39; +
                 &#39;,width=&#39;  + width  +
                 &#39;,height=&#39; + height +
                 &#39;,top=&#39;    + top    +
                 &#39;,left=&#39;   + left;
    window.open(url, &#39;.Twitter, .facebook, #google-plus, #stumbleupon&#39;, opts);
    return false;
  });
</script>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
<div class='plus-div'>
<a id='expand-plus'> + </a>
</div>
<div class='minus-div'>
<a id='expand-minus'> - </a>
</div>
</div>
</div>
</div>
</b:if>

That’s it. Save the changes made to your template. And check out your blog. Hopefully it’ll work. But if it didn't work for you please let me know.