Blogger Tips And Tricks: Add Social Sharing/Bookmarking Widget with Cool Hover Effect

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.

Step 1: Adding Css code

1.Login to Blogger Dashboard > Design tab > Edit Html
2.Click on Expand Template widgets ckeckbox
3.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOiQ-rIHpu8evz-kCBiIL1E7awPQT1egBz_QXPUsXstoQScG4mM2I9r9Ox1GydNBeIB3CPMUAofOseXnvUQ29rkGQ8nRzKc1pWIq12BD8Q9AR_sfzXXSTSq2OE_iS2ifpMgZxZ8A6tlUE/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

1.Search for <data:post.body/> tag
2.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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' 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 '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>

</ul>

</div>

</b:if>

Solution For Finding Code In Step 2

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/>

Enjoy !

Blogger Tips And Tricks

12 Apr 2012

Add Social Sharing/Bookmarking Widget with Cool Hover Effect

1 comment: