:
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. Live Demo:-
How to Install Social Sharing/Bookmarking Widget?
Step 1: Adding Css code1. 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/AVvXsEhfVVeQHTvaag56DFVpA1vAmnGxmgyllyL9LiAGJwD2wab8d5Ds6GMKparF9glNptVm0wvJ3Awc32_uCh5-oHsVLAsJaOSHPKaePfy8kI-gzRpZqNAFaPeJiFnQE98WYVfZjWw4cCfWZzw-/') ;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
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
Gửi bài viết này cho bạn bè qua Y!M:
0 nhận xét:
Đăng nhận xét