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. 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!
Step 2 :
Adding the Code
Find (ctrl+f)
]]></b:skin>
Copy the following code and Paste it before
]]></b:skin>
@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.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;
}
Find (ctrl+f)
<div class='post-footer-line post-footer-line-1'> in your template
Copy the following code and Paste it after
<div class='post-footer-line post-footer-line-1'>
<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>c
</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>
<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>
<script src='http://code.jquery.com/jquery-1.9.1.js' type='text/javascript'></script>
</div>
</div>
</div>
</b:if>
I'm very glad to share this Mashable Mashshare sharing widget to you and I hope you'd like it too. Let me know if you're facing any problems installing this widget. Enjoy blogging!
by
Mirza Bilal Arif
11:58 AM
Post a Comment
0 Comments
Aslam-O-aliakum friend you Are Connecting With Me xThanks