Cara Membuat Cool Social Share

Langsung saja sahabat, saya mau share membuat social sharing widget. Widget ini dilengkapi dengan jQuery dan cukup keren untuk anda tempatkan di blog anda. Ikuti langkah berikut.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Centang Expand Template Widget
Pasang kode berikut di atas kode ]]></b:skin>

#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/AVvXsEgUFU4c80kbhs5QFysRiC5vnh_KCjn7U_DuOI5JEAq6UQvjFKiVPmejIdToZKtj4838mQwaG40YtQVwuJmiRPZd1M0XJIvotifzQl0yBNdkGyEAmo1QfKNQ4JUbVfxWiXStStf208piuWAA/'); 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}

Selanjutnya pasang kode berikut di bawah kode <data:post.body/> atau <p><data:post.bod/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Alternatif lain anda dapat memasang kode di ataa (kedua) <div class='post-footer-line post-footer-line-1'> selanjutnya Simpan Template dan lihat hasilnya. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"