How to add Sharing Widget at the bottom of post

Monday, July 8, 20132comments

Rate this posting:
{[['']]}
Hello friend's
It is wasting of our time if we write a good, informative and creative post and no one share it. For sharing our post with other readers we need a sharing widget in our blog. That's right.

If readers find that our post might help someone else, than they want to share it. So, today we are going to show how to add an sharing widget at the bottom of the post. This widget share's our post to various sites like Google+, Facebook, Twitter, Pintrest, Delicious, Digg, Stumble, Reditt and also to RSS. It has an beautiful impression on mouse hovering effect.
Sharing Widget

Add Sharing Widget at the bottom of the post


  • Go to Blogger>>Dashboard>>Template>>Edit HTML
  • Pess ctrl+f and find <data:post.body/>
  • Now paste the following code below it.

<style> .blotricks a { display:block; height:48px; width:48px; padding:0 4px; float:left; background:transparent url( http://2.bp.blogspot.com/-2-WbGT3gi3o /UaBV1hYQ2oI/AAAAAAAAAik/B0D-XgIMkes /s1600/Sharing+Widget+For+Blogger.png) no-repeat; -webkit-transition: ease-in 0.15s all; -moz-transition: ease-in 0.15s all; -o-transition: ease-in 0.15s all; -ms-transition: ease-in 0.15s all; transition: ease-in 0.15s all; cursor:pointer; } .blotricks a.googleplus { background-position: 0px -348px; } .blotricks a.googleplus:hover { background-position: 0px -406px; } .blotricks a.pinterest { background-position: 0px -464px; } .blotricks a.pinterest:hover { background-position: 0px -522px; } .blotricks a.delicious { background-position: 0px 0px; } .blotricks a.delicious:hover { background-position: 0px -58px; } .blotricks a.digg { background-position: 0px -116px; } .blotricks a.digg:hover { background-position: 0px -174px; } .blotricks a.stumbleupon { background-position: 0px -812px; } .blotricks a.stumbleupon:hover { background-position: 0px -870px; } .blotricks a.technorati { background-position: 0px -928px; } .blotricks a.technorati:hover { background-position: 0px -406px; } .blotricks a.twitter { background-position: 0px -928px; } .blotricks a.twitter:hover { background-position: 0px -986px; } .blotricks a.facebook { background-position: 0px -232px; } .blotricks a.facebook:hover { background-position: 0px -290px; } .blotricks a.reddit { background-position: 0px -580px; } .blotricks a.reddit:hover { background-position: 0px -638px; } .blotricks a.rss { background-position: 0px -696px; } .blotricks a.rss:hover { background-position: 0px -754px; } .Pleaseshare{ margin:10px 0px; color:#333333; font-weight:bold; font-size:20px; font-family:sans-serif; } </style> <div class='blotricks'> <b:if cond='data:blog.pageType == "item"'> <div class="Pleaseshare"> Please Share it! :) </div> <a class='googleplus' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='external nofollow' target='_blank' title='+1'it :> <a class='facebook' expr:href='" http://www.facebook.com /sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook':> <a class='twitter' expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this':> <a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it' :> <a class='delicious' expr:href='" http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious' :> <a class='digg' expr:href='" http://digg.com/submit?phase=2& amp;url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this' :> <a class='stumbleupon' expr:href='" http://www.stumbleupon.com /submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this' :> <a class='reddit' expr:href='" http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit' :> <a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Bookmark plz' :> </b:if></div> <div style="clear:both"/>

  • Now save widget and you are done

HAPPY BLOGGING!
Get Free Updates in your Inbox
Follow us on:
facebook twitter gplus pinterest rss
Share this article :

+ comments + 2 comments

August 28, 2016 at 10:00 PM

Loved to read your blog. I would like to suggest you that traffic show most people read blogs on Mondays. So it should encourage blogger to write new write ups over the weekend primarily.Great post! Interesting information and cute writing style :) Writing like expert is not something that effectively goes to each substitute regardless of how determined or brilliant he is. Let's face honest, it comes to composing an expert resume or even up-dating one, a large portion of us could all utilization a touch of assistance. Composing an incredible resume from job resume writing service will be the going stone that grounds you a prospective employee meeting and you will need one that separates you from the rest.

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Widget For Blogs - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger