Advertise

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.

20 komentar:

  1. Selalu ada yang baru di sini dan selalu banyak ilmu yang ane serap di sini
    sugeng sore sob, semoga dimudahkan dalam segala hal

    BalasHapus
  2. 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!!!

    BalasHapus
  3. Djangan Pakis :: Amin Ya robbalalamin ... biasanya doa dari habib slalu Manjur. Terimakasih

    Blogger Admin :: Oke Um ditunggu Kelanjutannya...Sukses selalu.

    BalasHapus
  4. Ternyata hover bisa diterapkan dimana aza,termasuk ini.Wah,ilmu saya gak nyampai disana,jadi gak bisa niru seperti blog chugy.

    BalasHapus
  5. Zap,akhirnya berhasil juga.Makasih sahabat,makin keren ^_^.

    BalasHapus
  6. Suparyanto :: Tinggal kita berexperiment saja Sob...jangan takut untuk mencoba....!!! Sukses selalu.

    BalasHapus
  7. saya tertarik, tapi beLum sempat mencobanya. untuk sementara saya simpan duLu yah, trims.

    BalasHapus
  8. halo sobat...
    mampir nich kunjungan malam
    thanks infonya

    BalasHapus
  9. keren nih, jadi lebih manis tampilannya, saya langsung praktekinnih...nanti mampir ya lihat di blog saya he.he..

    BalasHapus
  10. hmmm semakin banyak karya dari olahan css untuk mempercantik dan menghiasai blog dengan pernak pernik
    Sukses Slalu!

    BalasHapus
  11. gag kepikiran saiia kang ada yg 'rounded corner'nya juga ternyata... huehehehe... maklum lah daya jeajah rendah :(

    BalasHapus
  12. nambah pengetahuan lagi dengan bersilaturahim kemari. trims atas ilmunya, sukses selalu n tetap semangat

    BalasHapus
  13. Kreatif, saya salut, sobat konsentrasi dengan tutorial permainan warna dan efek bayangan.

    BalasHapus
  14. Sobat, tutorialnya saya copas, mohon diizinkan. tengkiu.

    Oh ya, kalau untuk membuat efek bayangan pada komentar pengunjung, seperti punya sobat ini, gimana ya caranya?

    BalasHapus
  15. Kunjungan lagi,mencari kode warna untuk teks shadow (CSS3).

    BalasHapus
  16. kalau model cloud bisa di permak, kalau labelnya model kaya punya q bisa g yh sob di kasih ginian ? maaf baru bisa berkunjung kesini

    BalasHapus
  17. 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.

    BalasHapus
  18. Contohnya kaya yg di blog ini ya Sob,. keren2... ntar aku coba di blog satunya hhe...... thnx 4 share Sob....

    BalasHapus
  19. 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

    BalasHapus