Cara Membuat Label Cloud Miring Jika Disentuh Mouse

Cara Membuat Label Cloud Miring Jika Disentuh Mouse - Setiap blog tentunya memiliki fasilitas Label widget, pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya di blog. 

Kurang lebihnya seperti gambar dibawah ini sobat:

  
Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Sobat. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.

Intinya share kali ini untuk merubah widget label agar lebih cantik. dengan CSS dibawah ini akan mewarnai label sobat menjadi keren dan menarik. Berikut penjelasannya:

::Cara Membuat Label Cloud Miring Jika Disentuh Mouse::

1. Masuk Blogger Dasboard > Template > Edit HTML
2. Tekan Control + F > cari kode ]]></b:skin>
3. Jika sudah ketemu, Copy kode CSS dibawah ini dan Pastekan/letakkan kodenya tepat diatas kode ]]></b:skin>

 /*-----Labels Cloud Style by fauzischolovers.blogspot.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

5. Save Template

Keterangan !!!

Pastikan label pada blog sudah terpasang dan dibuat Cloud bukan List. LIHAT CARANYA DISINI