Hello people, today I'm sharing the clone widget of Shareholic Social Sharing Widget, since the original Shareholic has some issues like it requires the user to allow Shareholic App to share the link on Facebook or Twitter, which is very annoying and can prevent your readers from sharing your post to the most popular Social Networks.
So here is a custom widget made by me that looks exactly like the original one, it doesn't requires any app permission to share your page or post.
Even though there are hundreds of social sharing widgets out there, none of them look as neat and simple as this widget, the icons are medium size and sleek that gives a bit of Windows Metro look.
Here is the preview:
The only difference between this clone and original is the tooltip effect on mouse-over. The tooltip effect can be added using a small jQuery plugin called tiptip.
To add this widget follow these steps:
1. Go to Blogger Dashboard > Template > Edit HTML
and press CTRL+F to find this code:
]]></b:skin>
2. Now add the following code just before the code that you searched:
/* share buttons */
.share_wrapper .delicious {
background: url(http://4.bp.blogspot.com/-3ELy-V1dg1k/UdHmLinboHI/AAAAAAAAAyw/xNxxV_00C3Q/s70/dscuss2.png);
}
.share_wrapper .gplus {
background: url(http://2.bp.blogspot.com/-UgyJvNw1qJA/UdHNtMmjIII/AAAAAAAAAxw/XJ_wYlMGEvY/s70/gplus.png);
}
.share_wrapper .twitter {
background: url(http://3.bp.blogspot.com/-nkAt4by0s7M/UdHNuU5DpAI/AAAAAAAAAyg/jJ7x-yUxpnY/s70/twitter.png);
}
.share_wrapper .pinterest {
background: url(http://2.bp.blogspot.com/-K41o1fRpXZY/UdHNuWmGXTI/AAAAAAAAAyQ/e6UiUfIJl_A/s70/pinterest.png);
}
.share_wrapper .linkedin {
background: url(http://4.bp.blogspot.com/-WX4dOdfuqg4/UdHNtk765gI/AAAAAAAAAyE/516T8UuBhR4/s70/linkedin.png);
}
.share_wrapper .myspace {
background: url(http://1.bp.blogspot.com/-bK7g0To5RQk/UdHNt0fP4-I/AAAAAAAAAyI/mAmPrhTmp_Y/s70/myspace.png);
}
.share_wrapper .facebook {
background: url(http://1.bp.blogspot.com/-ZqlYOlViiWg/UdHNtKEg8sI/AAAAAAAAAx0/o-J_PaQ9RDo/s70/facebook.png);
}
.share_wrapper .delicious, .facebook, .gplus, .twitter, .pinterest, .linkedin, .myspace
{
display: inline-block;
width: 70px;
height: 20px;
-webkit-background-size: cover;
margin: 3px;
}
.share_wrapper .delicious:hover, .facebook:hover, .gplus:hover, .twitter:hover, .pinterest:hover, .linkedin:hover, .myspace:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8)";
filter: alpha(opacity=8);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.sharingheader {
background: url(http://4.bp.blogspot.com/-CFvaTalCoZw/UfIqUq1p0nI/AAAAAAAABCc/YXgzSHkTL4M/s1600/share-post.jpg) no-repeat;
display: inline-block;
width: 244px;
height: 44px;
margin: 3px;
}
.share_wrapper {
padding: 10px;
margin: 5px;
}
3. Find this code now:
<span class='reaction-buttons'>
4. Paste the following code just before the above code:
<!-- share buttons by Zenu Khas-->
<div style='text-align: center; padding-top: 5px;'>
<span class='sharingheader'/>
<div class='share_wrapper'>
<a class='facebook sharingtt' data-location='bottom' data-title='bottom' href='#' onclick=' window.open( 'http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;' title='Facebook'>
</a>
<a class='twitter sharingtt' href='#' onclick=' window.open( 'http://twitter.com/intent/tweet?text='+encodeURIComponent(location.href + ' ' + document.title), 'twitter-share-dialog', 'width=626,height=436'); return false;' title='Twitter'>
</a>
<a class='gplus sharingtt' href='#' onclick=' window.open( 'http://plus.google.com/share?url='+encodeURIComponent(location.href), 'gplus-share-dialog', 'width=626,height=436'); return false;' title='Google+'>
</a>
<a class='pinterest sharingtt' href='#' onclick=' window.open( 'http://pinterest.com/pin/create/button/?url='+encodeURIComponent(location.href)+'title='+document.title+'&media='+document.getElementsByTagName("img")[6].src, 'pinterest-share-dialog', 'width=626,height=436'); return false;' title='Pinterest'>
</a>
<a class='linkedin sharingtt' href='#' onclick=' window.open( 'http://www.linkedin.com/shareArticle?mini=true&url='+encodeURIComponent(location.href)+'&title='+document.title, 'linkedin-share-dialog', 'width=626,height=436'); return false;' title='LinkedIn'>
</a>
<a class='delicious sharingtt' href='#' onclick=' window.open( 'http://del.icio.us/post?url='+encodeURIComponent(location.href)+'&title='+document.title, 'delicious-share-dialog', 'width=626,height=436'); return false;' title='Delicious'>
</a>
<a class='myspace sharingtt' href='#' onclick=' window.open( 'http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(location.href)+'&t='+document.title, 'myspace-share-dialog', 'width=626,height=436'); return false;' title='My Space'>
</a>
</div>
</div>
Gr8 :) you have successfully added the best sharing widget of all time :) cheers!