Social sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with css/jquery. This widget is used by me in way2blogging.blogspot.com with CSS. After moving to .Org domain name, i change the Template.
Here i am giving that widget and added a cool hover effect with CSS3 for you. If you like it then you can use in your blog 
Live Demo:-
How to Install Social Sharing/Bookmarking Widget?
Step 1: Adding Css code
- Login to Blogger Dashboard > Design tab > Edit Html
- Click on Expand Template widgets ckeckbox
- Search for
]]></b:skin>tag and put below code above it!#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;} #w2b-share ul li {display: inline;background:none;margin:0;padding:0;} #w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } #w2b-share ul li a.twitter {background-position: -0px -0px; } #w2b-share ul li a.twitter:hover {background-position: -0px -33px; } #w2b-share ul li a.facebook {background-position: -32px -0px; } #w2b-share ul li a.facebook:hover {background-position: -32px -33px; } #w2b-share ul li a.stumbleupon {background-position: -64px -0px; } #w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; } #w2b-share ul li a.digg {background-position: -192px -0px; } #w2b-share ul li a.digg:hover {background-position: -192px -33px;} #w2b-share ul li a.reddit {background-position: -160px -0px; } #w2b-share ul li a.reddit:hover {background-position: -160px -33px;} #w2b-share ul li a.google {background-position: -128px -0px; } #w2b-share ul li a.google:hover {background-position: -128px -33px;} #w2b-share ul li a.del-icio-us {background-position: -480px -0px; } #w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;} #w2b-share ul li a.mixx {background-position: -96px -0px; } #w2b-share ul li a.mixx:hover {background-position: -96px -33px; } #w2b-share ul li a.technorati {background-position: -416px -0px; } #w2b-share ul li a.technorati:hover {background-position: -416px -33px;} #w2b-share ul li a.linkin {background-position: -256px -0px; } #w2b-share ul li a.linkin:hover {background-position: -256px -33px;} #w2b-share ul li a.yahoobuzz {background-position: -448px -0px; } #w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;} #w2b-share ul li a.myspace {background-position: -512px -0px; } #w2b-share ul li a.myspace:hover {background-position: -512px -33px;} #w2b-share ul li a.more {background-position: -576px -0px; } #w2b-share ul li a.more:hover {background-position: -576px -33px;}
Step 2: Adding Widget Code
- Search for
<data:post.body/>tag - And Put Below Code immediately after it! & Save your Template
<b:if cond='data:blog.pageType == "item"'> <div id='w2b-share'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li> <li><a class='facebook' expr:href='/2011/05/ampquothttp//facebookcom/sharer_u__ampquot__datapost.url____ampquot__ampamptitle__ampquot__datapost.title_.html' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li> <li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li> <li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li> <li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li> <li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li> <li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li> <li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li> <li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li> <li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li> <li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li> <li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/gtltscript_src/index.html'http://static.addtoany.com/menu/page.js' type='text/javascript'/></li> </ul> </div> </b:if>
Solution For Finding Code In Step 2
here i received a comment While finding the <data:post.body/> code is coming three time
This Problem comes when we install Auto Read Hack in our Blogs
For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!
<div class='post-footer-line post-footer-line-1'><div class='post-footer'><b:if cond='data:blog.pageType == "item"'>
<data:post.body/>Thank you for All your Info & Support
lookin good you have this for counter series for social bookmarking like facebook count box etc.
check out my site
http://smahkin.blogspot.com/
Thanks!
i found tag three times below which i should paste the second code pls help..
@Ro6o$ap!3n
Oh! you are using Auto ReadMore Hack,
i have updated the Code
Thanks for Info
thanks your site is the best good article
thanks i have used this tip on my blog http://cargoogler.blogspot.com/
thanks for the nice tip
hey its not working for me dude…help me my blog is www.ethicalhackrz.tk
WoW ! You are the boss… ! PLZ write new posts fast.. wating for that… ! can please tell me how can I use yahoo smileys on my post ? please I used many things from your blog… ! Many Many Love from me.. please keep updating.. request from everyone !
<3
Harish, thank you for this fantastic job, I put it on my blog: http://checkapps.blogspot.com/
I want to know how to center the widget and how to add or delete elements of this widget, if it's possible.
works flawlessly!
Thanks =)
Works Perfect!
But When i Manually Add it and Html File Share Icons Shows Two Times Inline
Working Okay On Blogger
@Equinox
he he he…
i am provided the widget code is for only for Blogger and it contains Blogger XML Attributes. it is not works in a HTML file.
Thanks for Your Comment.
Nice turorial, the chromatic color very well blended on dark themes, but i have some problem here, how can i put the buttons get centered? just like yours, thank you very much mates
What do I do If I want to put above widget in the starting of my post ?
@Himanshu
in Step 2
put the Widget Code before the given tag
Strangest thing is happening in my blog, The icons are transparent. Please help!
Aditya Samitinjay
thanks , but it didn't appear in my blog
http://blog4drs.blogspot.com
hey in my blog each button is appearing twice. please help
i want to put in the sidebar
umm sorry, if cannot find the
coz it's not there. can you help me??
Now its working Awesome Widget Thnxxxxxxx
@techhim
the widget is only for post, it is not works on sidebar
hey harish!
I'm here again. I finally decided to make use of this widget. I made it work without even a sweat.
This was the line I searched for
it didn't appear in my blog
http://jaycutlerbest.blogspot.com/
what can i do now plz visit my blog i add back to top button its working but not show this widget hack
Thanks man. They're really good
Thanks a lot i very like it ^_^
loved it ..thanks buddy!!!
Can you help me. How to make the share widget to center ?
Harish can you help again how to make this sharing widget like demo…on box and center please help me.
how about an xml with this codes
i cant implement this with my blog, thannks a lot.
Works great
Brother, I cnt find step 2 in my template. Pls help me!!!
Can you make this for facebook count and like or pageview statistic.
Thanks a lot for providing this great widget and the 2 easy steps for applying it.
I have implemented this in my blog(with few minor modification, as i wanted only few bookmarking sites).They work perfectly now and the look and feel also matches perfectly with my website theme.
I read lot of tutorials regarding this feature on different websites , but i think yours is the best one.
Thanks again for sharing your work.I am sure lot of people have already benefited from this post.
nice bro
I liked this widjet so much but not able to add.i was not able to find all the 4 codes u have.. Only first one i found.. Pls give some solution
i wont find set 2 code(
)
what can i do now?
help plz!!!
Thanks bro, This is one of the best websites on blogger hacks. I enjoy experimenting widget, script provided by you …. Thanks man keep the good work up ….
I can’t find any of the last three codes anywhere in my HTML codes. Maybe Blogger has changed something since you wrote this guide?
Do you happen to have a fix for it?
Hello Harish, Thanks for this, but I need simple HTML gadget like the above hover effect for blogger. I only want RSS, facebook, twitter and google+ icons. Please
Thanks
I would love a Pinterest button to add to this!
i want to add this on the top sidebar…. please help me…
http://freakload.blogspot.com/
Check out this blog .. i used this widget in my blog as a subscribing widget, which only contains facebook, twitter, google+ and RSS icon which will have the same hover effect.
Check the TOP-RIGHT of the blogg..! =D
didn’t find tag in my blogger template . How can i add step 2 code ?
check/tick the “Expand Template Widgets” check box..
Thanks bro for replying quickly. I have done all steps now but not working… :/
the widget is working fine in your blog !!??
Bingo, this is working with my blog. Thanks for this nice post. But, I have a request. I want to add google+, linkedin and rss button. Can you please help me?
How to show it on main page after or before ‘Read More’ below every post…?
Thank You Very Much
I got it…!!!!!!!!!!
its not work!
I have tried it but they are not working, it only display buttons and hover effect is also there but they are not clickable. My website is not hosted on blogger, but i am using simple html, css and javascript. Please help
This only works on Blogger.