Add Social Sharing/Bookmarking Widget with Cool Hover Effect
0
Add Social Sharing/Bookmarking Widget with Cool Hover Effect
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUE93Xvem8Jr6mbhr8ccFCGQJHJg5855L3ev99DCv_Xh-E7ekdqqksFKRGxgBNuOji-1QyLNoVpEFJzmmCo9YtfMCDZeJgg91hs6GQSMq8nKHG3XbUav_hqaV-7vfvYUVMtdZ84XUEMLdF/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;}
- 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='"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
here i received a comment While finding the<data:post.body/> code is coming three timeThis 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/>
