Skip to main content

Fast Loading Social Sharing buttons – No JavaScript Used

fast loading social share buttonsHere is one of the lightest and quickest social sharing buttons you’ll have ever come across. As i always say – simplicity is the best and so does this simple fastest social sharing buttons widgte is the best in class.

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">
/*
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='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target="_blank" title="Share This Post On Facebook" class="bloggslab_facebook-share bloggslab_light_share_DIV">Send</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target="_blank" title="Tweet This Post On Twitter" class="bloggslab_twitter-tweet bloggslab_light_share_DIV">Tweet</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + 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='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;description=&quot; + data:post.title + &quot;&amp;media=&quot; + 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='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' target="_blank" title="Share This Post On LinkedIn" class="bloggslab_linkedin-share bloggslab_light_share_DIV">InShare</a>
</div>
If you need to add it your website leave a comment below.


Comments

Popular posts from this blog

Automatic Read More With Thumbnails for Blogger

Blogger gives us an option to add jump break to posts. It enables us to display a a short summary of the post on the homepage of our blog with a link to the full post. Most of us add jump break to our posts, because displaying a short summary instead of the full post on the main page has many advantages. The main reason is that it increases page views and the visitors can easily get a selection of your posts.

Responsive Recent Posts Slider Widget for Blogger

Here is one amazing responsive featured post slider for your blogs. This slider is Here i am with a fully automated featured posts slider for blogger blogs. This widget features a complete responsive design and is coded to fetch the most recent posts automatically from your blog. Yes i said fully automated, you only need to add your blog url in the code.

Design a Fancy Accordion Widget For Blogger

Accordion widgets are really helpful in organizing links in your blog. You can use it to list out popular posts in categories in the form of an expandable and collapsible menu. It is an effective and neat way of listing longs list of links.