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.
-
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 CustomizableRequirements
Jquery Library v1.2.3 or higher (?)
-
Demo
Demo not available.
-
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 == "item"'>
<div class='social-div'><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); 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='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' id='socialshare' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); 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='"https://plus.google.com/u/0/share?url=" + data:post.url' id='google-plus' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/></a>
<a data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' id='linkedin' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyveVlQUUtDZXgyNXc'/></a>
<a data-title='Stumble-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' id='stumbleupon' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>
<img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/></a>
<a data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' id='pinterest' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); 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('expand-social');'><a id='expand-plus'> + </a><div class='minus-div'><a id='expand-minus'> - </a></div></div></div></div></b:if> -
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;} -
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!
-
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
Rate This Article
Thanks for reading: Mashable Mashshare Social Media Sharing Widget For Blogger, Stay tune to get latest Blogging Tips.