Why is it faster? No JavaScript is used to code this social share widget. It works purely on html and css.
This widget can be easily added to both blogger blogs and other websites. So read on….
Check out the demo of the widget
Adding the widget in blogger
- First navigate to blogger.com > dashboard > template > edit html
- Now search for <data:post.body/> [tip: use CTRL+F to search]
- Paste the below code just after <data:post.body/>
<style type="text/css">If you need to add it your website leave a comment below.
/*
Lite Loading Social Sharing Buttons
Copyright (c) 2014 Bloggslab.com
View Tutorial At: www.bloggslab.com/2014/04/stylish-fast-social-share-buttons-widget.html
----------------------------------------------- */
#bloggslab_light_share{padding:5px;height:20px;}
.bloggslab_light_share_DIV{text-align:center;width:120px;padding:5px 0px;float:left;margin-left:5px;color:#fff;text-decoration:none;}
.bloggslab_facebook-like{background-color:#3b5998;}
.bloggslab_facebook-share{background-color:#3b5998;}
.bloggslab_twitter-tweet{background-color:#00aced;}
.bloggslab_pintrest-pin{background-color:#cb2027;}
.bloggslab_googleplus-share{background-color:#dd4b39;}
.bloggslab_linkedin-share{background-color:#007bb6;}
</style>
<div id="bloggslab_light_share">
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target="_blank" title="Share This Post On Facebook" class="bloggslab_facebook-share bloggslab_light_share_DIV">Send</a>
<a expr:href='"http://twitter.com/share?url=" + data:post.url' target="_blank" title="Tweet This Post On Twitter" class="bloggslab_twitter-tweet bloggslab_light_share_DIV">Tweet</a>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' target="_blank" title="Share This Post On GooglePlus" class="bloggslab_googleplus-share bloggslab_light_share_DIV">G+Share</a>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&description=" + data:post.title + "&media=" + data:post.thumbnailUrl' target="_blank" title="Pin This Post On Pintrest" class="bloggslab_pintrest-pin bloggslab_light_share_DIV">Pin It</a>
<a expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippet' target="_blank" title="Share This Post On LinkedIn" class="bloggslab_linkedin-share bloggslab_light_share_DIV">InShare</a>
</div>
Comments
Post a Comment