Membuat tombol share lebih cantik

Membuat tombol share mungkin sudah banyak di bahas di tempat lain. Tapi kebanyakan tutorialnya hampir sama persis. Yaps, kali ini saya akan memposting artikel tentang membuat tombol share lebih menarik. Kalo boleh sombong, widget ini adalah asli buatanku sendiri (aduh jadi malu). Ilmu ini saya dapat setelah belajar dasar-dasar efek hover yang perah aku posting di blogku yang lain yaitu www.ega88.web.id

Sifatnya, jika mouse belum menyentuh area gambar, gambar akan menjadi hitam. beda dengan kebanyakan yang hanya redup. Untuk mengetahui demonya, silahkan lihat di bawah postingan, ada tulisan Share to. Itulah yang saya maksud dengan tombol share

Mari Kita praktekan bersama-sama

1. Login ke Blogger
2. Masuk Ke Tata letak
3. Pilih menu Edit HTML & jangan lupa centang kotak kecil
4. cari kode ]]></b:skin>
5. Letakan kode di bawah ini, di bawah kode ]]></b:skin>

<style type='text/css'>
.e-delicious a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i45.tinypic.com/9uchh5.png) 0 0 no-repeat}
.e-delicious a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/delicious.png) 0 0 no-repeat}
.e-digg a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i46.tinypic.com/2cpxbbm.png) 0 0 no-repeat}
.e-digg a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/digg.png) 0 0 no-repeat}
.e-technorati a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i49.tinypic.com/2ic4jzq.png) 0 0 no-repeat}
.e-technorati a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/technorati.png) 0 0 no-repeat}
.e-reddit a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i50.tinypic.com/11uhift.png) 0 0 no-repeat}
.e-reddit a:hover{border-bottom:none;outline:none;background:transparent url(http://i50.tinypic.com/wvvntc.png) 0 0 no-repeat}
.e-stumble a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i45.tinypic.com/33auh42.png) 0 0 no-repeat}
.e-stumble a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/stumbleupon.png) 0 0 no-repeat}
.e-designfloat a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i47.tinypic.com/9g9don.png) 0 0 no-repeat}
.e-designfloat a:hover{border-bottom:none;outline:none;background:transparent url(http://i49.tinypic.com/2wn72xg.png) 0 0 no-repeat}
.e-facebook a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i50.tinypic.com/34griht.png) 0 0 no-repeat}
.e-facebook a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/facebook.png) 0 0 no-repeat}
.e-twitter a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i50.tinypic.com/29q1bx5.png) 0 0 no-repeat}
.e-twitter a:hover{border-bottom:none;outline:none;background:transparent url(http://iconsbee.com/wp-content/plugins/sociable/images/twitter.png) 0 0 no-repeat}
.e-furl a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i47.tinypic.com/dc68vc.png) 0 0 no-repeat}
.e-furl a:hover{border-bottom:none;outline:none;background:transparent url(http://i48.tinypic.com/14xcl0o.png) 0 0 no-repeat}
.e-feed a{float:left;display:block;width:48px;height:48px;background:transparent url(http://i46.tinypic.com/2czsimu.png) 0 0 no-repeat}
.e-feed a:hover{border-bottom:none;outline:none;background:transparent url(http://i48.tinypic.com/wc8w.png) 0 0 no-repeat}
</style>

6. Jika sudah, silahkan cari kode <data:post.body/> (cari yang paling bawah)
7. Jika sudah ketemu, letakan kode berikut ini, di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Share to:</h2>
<center><table><tr>
<td><div class='e-delicious'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-digg'>
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-technorati'>
<a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-reddit'>
<a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-stumble'>
<a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-designfloat'>
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-facebook'>
<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-twitter'>
<a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-furl'>
<a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/>
</div></td>
<td><div class='e-feed'>
<a href='http://egablogspot.blogspot.com/feeds/posts/default'/>
</div></td>
</tr></table></center>
</b:if>

8. Selesai, dan lihat hasilnya