- Login ke blogger dashboard-->Klik Design-->Edit HTML
- Cari kode ]]></b:skin> Paste kode dibawah ini tepat diatasnya
#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/AVvXsEjF2LxgV6JRcbaOIUYku7p-tSrUa8-m-oBPn47C5f7v05LtxV010reJtgQNk_OaEvIas1sQxub2LrSjxR9zUhgxmn-H4PYL1DNmEWl27ZWja7I6q9X_R3_tg33mq73JXrNxxSm4aJ2zsxVV/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;}
- Seterusnya cari kode <data:post.body/>
- Paste kode social sharing ini dibawahnya
<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>
- Perhatian!sekiranya kode <data:post.body/> ada tiga dalam template anda cari mana2 kode dibawah dan pastekan kode social sharing dibawah/selepasnya.
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType ==
"item"'>
<data:post.body/>
- Save template bla.....bla.....bla.........siap deh demikian Cara Menambah Widget Social Sharing di Blog silahkan dicoba...
2 comments: on "Cara Menambah Widget Social Sharing di Blog"
thx gan atas infonya..jgn lupa mampir di http://neoblackheroic.blogspot.com gan
Neo BlackHeroic terima kasih gan dah mampir di blog ane.....ok ane kunjungi blik blog agan.....thanks
Post a Comment