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

47 Komentar:

Aditx mengatakan... [Reply to Comment]

Saya suka social bookmarknya . . akan saya coba ^_^

NURA mengatakan... [Reply to Comment]

salam sobat
saya akan coba mas Ega.
membuat tombol share yang cantik ini.
trims ilmunya.

ivan kavalera mengatakan... [Reply to Comment]

terimakasih infonya, sob.

akhatam mengatakan... [Reply to Comment]

Wahh ho'oo.. cantik2... kerenn mas ega..

mellbourne mengatakan... [Reply to Comment]

wahhh mantep bgt kawan info nya
sadis bgt nih bisa bwat sendiri
kyk nya sadis bgt nih blog nya....
thx ya kawan dah mampir ke blog w ,,,
tp follow nya msh di tunggu nih kawan,,,,

TUKANG CoLoNG mengatakan... [Reply to Comment]

sangat jarang ada yang mau share blog orang lain..itu masalahnya..takutnya gag efektif.
dipikir dulu deh

Coretan Felix mengatakan... [Reply to Comment]

I like it
jadi tambah elegan kang Ega
hehehe

chugy mengatakan... [Reply to Comment]

Thanks bt sharing infonya...
Good blog and good post.

oketrik mengatakan... [Reply to Comment]

banyak tombolnya apa g ngeberatin loading sob?

Hidup Untuk Memberi | Denaihati Berbagi Acer Aspire One Free mengatakan... [Reply to Comment]

keren sob kapan2tak coba yah

pakies mengatakan... [Reply to Comment]

wah keren sobat, patut di coba nih
trims impohnya

tomo mengatakan... [Reply to Comment]

Thanks nih boz.
Kapan kapan akan aku praktekkan.
Save dulu aja

Aguestri mengatakan... [Reply to Comment]

KAlo buat Wp bisa nggak sob? And ditaruh dimana???

Pak Liek mengatakan... [Reply to Comment]

bagus ...
pak liek masih cinta pada produk lama ...
ntar kalau buat baru mungkin ini bisa jadi rujukan ...

Andi Wong mengatakan... [Reply to Comment]

mantaaab ega... let's sharing knowledge.. :)

yudex mengatakan... [Reply to Comment]

keren nih sob.. salam kenal juga. :)

Damar mengatakan... [Reply to Comment]

Wahh .. mantep kang, tapi ukurannya masih kegedean . . . .

Aku follow ya Kang. . .

Artikel Islami mengatakan... [Reply to Comment]

assalamualaikum kawan

wah g ada demonya ya.. jadi g tau kira2 hasilnya gimana ni...

TUKANG CoLoNG mengatakan... [Reply to Comment]

berkunjung lagi nih..:)

kekah mengatakan... [Reply to Comment]

iya menarik sob, lain drpada yang lain..keren..

Infophone-kdr mengatakan... [Reply to Comment]

Wach cantik bnr nich Mas Ega hasilnya langsung menuju TKP dech,makasi tutornya maknyus bgt nich...:D

rizal mengatakan... [Reply to Comment]

mmm..keren, biar masin tambah canik dan menarik blog kita..
btw. bikin loading makin berat nggak ya..??

sehat-mu mengatakan... [Reply to Comment]

keren sahabat... asyk dilihatnya...
terimaksih banyak sudah berbagi sahabat

riFFrizz mengatakan... [Reply to Comment]

lebih atraktif

Ega-Priatma mengatakan... [Reply to Comment]

Kalo bikin loading blog berat sih iya, sedikit. karena sudah aku compress

Never Give Up Dude | Leader Street mengatakan... [Reply to Comment]

dicoba deh tipsnya di blog yang lain, ma kasih dah share

nuances pen dofollow mengatakan... [Reply to Comment]

Ijin copy bila sudah gabung akan kucoba! Trims!

ungkapkan mengatakan... [Reply to Comment]

wuuuuuuuua aku selalu lola alow lihat bahasa program

Ryan mengatakan... [Reply to Comment]

mantabs gan. Kunjungi balik blog saya ya.
Www.phonecompi.co.cc

Buku Gratis mengatakan... [Reply to Comment]

keren abis postingannya sob, saya minta ijin untuk mencobanya....

ANAK RANTAU mengatakan... [Reply to Comment]

wah makasih mas udah aku cobain lumayan mas hasilnya bagus.eheheheheh

Bang Koko mengatakan... [Reply to Comment]

pas nich dgn template baru saya warnanya...

saya ambil ahhh....

thx bro ats sharingnya........

jika berkenan silahkan mampir balik......

Saepul Supriatna mengatakan... [Reply to Comment]

Mantap Gann... makasih banyak..

Martina mengatakan... [Reply to Comment]

Thanx ya,....for the information :-)

Yahya Blog's mengatakan... [Reply to Comment]

keren bgt mas...

blog walking http://yahyablogs.co.cc

RGates mengatakan... [Reply to Comment]

salam kenal aja

Freedownloaderz mengatakan... [Reply to Comment]

ini nanti jadinya di sebelah mana Blog... jadi 1 sama Postingan kah atau jadi satu sama barisan Widget yg lain...?

adibey mengatakan... [Reply to Comment]

keren nih sob...


mkasih sudah berbagi..

El Biluy mengatakan... [Reply to Comment]

Langsung ke TKP mas ,,
makasi ni di coba dulu ..

@cinta,motivasi,tutorial,download
www.elbiluy.co.cc

Sinjay mengatakan... [Reply to Comment]

Nice mas...
Thx

CREATIVITY IMAGES mengatakan... [Reply to Comment]

mantap ^_^

DETIKZ mengatakan... [Reply to Comment]

wew....mantap gan tipsnya...makasih ya

tuslia mengatakan... [Reply to Comment]

sudah dicoba dan berhasil... makasi kakak :D

iTV-GEAR.com mengatakan... [Reply to Comment]

thanks infonya, dicoba dulu :)

elang mengatakan... [Reply to Comment]

wah,,banyak bgt codenya om,,apa tar g beratin blognya??hehee,,btw,thx infonya,, :)

tae kyung hyung nim mengatakan... [Reply to Comment]

pusing, udah nyoba tapi belom bsa juga!

shafira mengatakan... [Reply to Comment]

wah,,.. gratis kan ini bang,,..???

Poskan Komentar

 

Kotareyog

Site Information

Page Rank: Google PageRank Checker
Alexa:
Visitor:

Recent Comments

Copyright © Egablog | Powered by Blogger | Template design by Ega Priatma