Label Cloud Dengan Hover Background Ronded Corner

Kali ini saya coba memodifikasi tampilan dari label cloud dengan menambahkan hover background ronded corner pada setiap link label cloud tersebut, secara standar label cloud ataupun link akan mengikuti pengaturan tautan link standar dari template anda.

label cloud hover background

Langsung pada tutorial mengatur Label cloud dengan hover background caranya seperti berikut :

Pertama tambahkan label cloud terlebih dahulu pada blog anda
Tambah Gedget > Label > Cloud > Simpan.

Masuk pada Edit HTML masukan kode di bawah ini pada bagian CSS atau diatas kode ]]></b:skin&gt;

#Label1{
margin:0px;
padding:6px
}
#Label1 .widget-content{
line-hight:1.4em;
text-align:center;
margin:0px; padding:10px
}
#Label1 a{
text-shadow:1px 1px 0 rgba(255,255,255,0.8);
color:#000;
text-decoration:none; padding:4px;
}
#Label1 a:hover{
padding:1px 4px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px; border-radius:5px;
background:#a0a0a0; color:#fff;
}

Pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Untuk hover background saya menambahkan ronded corner dan juga teks shadow silahkan di rubah sesuai selera anda, anda juga bisa mengcustom padding dan margin agar lebih pas dengan template anda. Selamat mencoba.

Komentar

Djangan Pakies mengatakan…
Selalu ada yang baru di sini dan selalu banyak ilmu yang ane serap di sini
sugeng sore sob, semoga dimudahkan dalam segala hal
blogger admin mengatakan…
dah di coba sama blog satunya bagus jadinya cuma om ganti text-align:left;
Mantap chugy, oia kalu ini bisa pakai filter gradient buat ie cuma background harus image gradient. belum pasti sih, Ntar om mau coba lagi.
Lanjut!!!
Chugy mengatakan…
Djangan Pakis :: Amin Ya robbalalamin ... biasanya doa dari habib slalu Manjur. Terimakasih

Blogger Admin :: Oke Um ditunggu Kelanjutannya...Sukses selalu.
Unknown mengatakan…
Ternyata hover bisa diterapkan dimana aza,termasuk ini.Wah,ilmu saya gak nyampai disana,jadi gak bisa niru seperti blog chugy.
Unknown mengatakan…
Zap,akhirnya berhasil juga.Makasih sahabat,makin keren ^_^.
Chugy mengatakan…
Suparyanto :: Tinggal kita berexperiment saja Sob...jangan takut untuk mencoba....!!! Sukses selalu.
om rame mengatakan…
saya tertarik, tapi beLum sempat mencobanya. untuk sementara saya simpan duLu yah, trims.
Unknown mengatakan…
halo sobat...
mampir nich kunjungan malam
thanks infonya
rizal mengatakan…
keren nih, jadi lebih manis tampilannya, saya langsung praktekinnih...nanti mampir ya lihat di blog saya he.he..
Blogger mengatakan…
hmmm semakin banyak karya dari olahan css untuk mempercantik dan menghiasai blog dengan pernak pernik
Sukses Slalu!
genial mengatakan…
gag kepikiran saiia kang ada yg 'rounded corner'nya juga ternyata... huehehehe... maklum lah daya jeajah rendah :(
harto mengatakan…
nambah pengetahuan lagi dengan bersilaturahim kemari. trims atas ilmunya, sukses selalu n tetap semangat
kayanya yang versi blogger juga ada ya..?
Medianers mengatakan…
Kreatif, saya salut, sobat konsentrasi dengan tutorial permainan warna dan efek bayangan.
Medianers mengatakan…
Sobat, tutorialnya saya copas, mohon diizinkan. tengkiu.

Oh ya, kalau untuk membuat efek bayangan pada komentar pengunjung, seperti punya sobat ini, gimana ya caranya?
Unknown mengatakan…
Kunjungan lagi,mencari kode warna untuk teks shadow (CSS3).
Rizkyzone mengatakan…
kalau model cloud bisa di permak, kalau labelnya model kaya punya q bisa g yh sob di kasih ginian ? maaf baru bisa berkunjung kesini
Chugy mengatakan…
Medianer :: Mangga ,,,, semoga bermanfaat.
Untuk efek bayangan silahkan cari di postingan sebelumnya mengenai box shadow dngan css3

http://chugygogog.blogspot.com/2010/09/buat-box-shadow-dengan-css3.html

Ada beberapa sample code box shadow yang mungkin bisa membantu.
Ferdinand mengatakan…
Contohnya kaya yg di blog ini ya Sob,. keren2... ntar aku coba di blog satunya hhe...... thnx 4 share Sob....
Sherlogic mengatakan…
Makasih ya mas bos kodenya, baru sekali cari di search engine langsung ketemu nih caranya. hhe :D
gue udah coba tapi gue edit dikit. hhe :D

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text