Mashable Mashshare Social Media Sharing Widget For Blogger

Mashable is one of the leading social media when it comes to technology out there with millions of reader and subscriber. Their web designers are always a step forward when it comes to their blog's user experience.
Mashable Mashshare social sharing widget is one of the best widget that I have seen so far in my blogging history.

1. Intro
2. Demo
3. HTML
4. CSS
5. Script
6. Final Words

• Prev
• Next

1. Introduction

   This social media sharing widget includes Facebook, Twitter, Google+, LinkedIn, StumbleUpon and Pinterest. This widget becomes unique because it has a counter for total shares and has expanding effect.

   
   

   This widget uses Jquery to create an Expanding effect on the button and Css for the style, and of course Html for the structure of the widget.You can follow the steps below to add this Mashable Mashshare social sharing widget to your own blogger blog today!

   
   

   Features

   Lightweight CSS
   Minified Script
   Improved HTML
   SEO friendly
   Fully Customizable
   

   Requirements

   Jquery Library v1.2.3 or higher (?)
   

2. Demo

   Demo not available.

3. HTML

   Go to Blogger » Template » Backup your Template » and Edit HTML
    Search for <div class='post-footer-line post-footer-line-1'> in your template and right below it copy the following code
   
   

   <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 + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8' style='margin-right:8px;margin-left:-5px;'/> Share on Facebook</a>
   <a class='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM' style='margin-right:8px;margin-left:-5px;'/> Share on Twitter </a>
   <div id='expand-social' style='display:none;left: -5px;height:44px;'>
   <a data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' id='google-plus' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/></a>
   <a data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' id='linkedin' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyveVlQUUtDZXgyNXc'/></a>
   <a data-title='Stumble-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='stumbleupon' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/></a>
   <a data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' id='pinterest' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
   <img src='https://googledrive.com/host/0B8D3MQmcZTyvdTFzVEs0SzdXNFE'/></a></div>
   <div class='share-toggle'><div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'><a id='expand-plus'> + </a><div class='minus-div'><a id='expand-minus'> - </a></div></div></div></div></b:if>
   

4. CSS

    Copy the following code and Paste it before ]]></b:skin>
   
   

   .social-div .facebook{background:#3b5998;}.social-div .Twitter{background:#07c2ef;}.social-div a{text-decoration:none!important;display:inline-block;}
   .social-div a img{display:inline-block;}#socialshare{-webkit-border-radius:4;-moz-border-radius:4;border-radius:4px;color:#ffffff;font-size:16px;padding:15px 20px 15px 20px;text-decoration:none;font-family:Raleway;margin-right:10px;-webkit-font-smoothing:antialiased;-webkit-text-rendering:optimizeLegibility;}
   .share-toggle{font-size:4rem;border-radius:2px;margin-right:4px;background:#c5c5c5;position:relative;display:inline-block;cursor:pointer;vertical-align:middle;height:48px;width:45px;top:-2px;text-align:center;color:#fff;}
   .share-toggle a{color:#fff;text-decoration:none;}
   .social-div{border-top:1px solid #CCC;vertical-align:middle;padding: 15px 5px 10px 5px;}
   #expand-minus{display:none;line-height:48px;}
   #expand-social{display:inline-block;vertical-align:middle;position:relative;top:0px;left:-4px;}
   #social-expand{display:inline-block;vertical-align:middle;position:relative;top:0px;left:0px;}
   .minus-div{margin-top:-6px;}
   #expand-plus{position:relative;line-height:48px;font-size: 80%;}
   #expand-social img{height:44px;}
   

5. Script

    Search for </body>  then copy the following code above it
   
   

   <script type='text/javascript'>
   function toggle(d){$("#" + d).animate({width:'toggle'},400);}
   $(document).ready(function(){
   $("#social-expand").click(function(){
   $("#expand-plus").toggle();
   $("#expand-minus").toggle();
   });
   });
   </script>
   
   

   Save your Template!

6. Final Words

   I'm very glad to share this Mashable Mashshare sharing widget to you. Let me know if you're facing any problems installing this widget. Enjoy blogging!
   
   Mashable Mashshare Social Media Sharing Widget For Blogger V2