Widget Cloud adalah fasilitas widget yang diberikan oleh blogspot untuk memberikan tampilan yang berbeda pada pilihan category postingan blog.
Contoh tampilan yang ada diatas menggunakan effect hover animasi bergerak, gerakan hover diatas dimodifikasi melalui css yang ada di edit html, untuk lebih jelasnya langsung kita praktekan saja bagaimana cara membuat tampilan widget cloud lebih menarik dengan style six.
1. Masuk ke-blogspot anda
2. Silahkan tambahkan label Cloud pada blogspot anda terlebih dahulu sebelum masuk ke modifikasi css
3. Silahkan masuk pada template
4. Pilih edit HTML
5. Search(CTRL+F)
Kode ]]></b:skin> terlebih dahulu
6. Tambahkan CSS berikut sebelum Kode ]]></b:skin>
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 2px #6BB5FF; background:transparent; border-radius: 3px; float:left; text-decoration:none; font-size:12px; color:#666;}
.label-size:hover { border:1px solid #6BB5FF; background:transparent; 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; }
Note: Pada tulisan yang bercetak tebal anda dapat mengganti warna border “garis yang mengelilingi label” dan background (latar warna label) sesuaikan dengan warna tema blog anda.
Hasil tutorial modifikasi yang mimin lakukan dengan menggunakan font warna #666 dan hover dengan mengguankan Kode Warna #6BB5FF, Silahkan berkresi secreative anda, sesuai keinginan anda jika anda membutuhkan refrensi warna silahkan kunjungi ~>
Kode Warna.
Jika anda sudah merubah dan anda rasa sudah benar silahkan pilih Preview atau pratinjau untuk melihat hasil sementara, Jika anda sudah yakin benar atau sesuai dengan anda silahkan Pilih Simpan atau Save.
