Membuat Tampilan Widget Label Blog Menjadi Lebih Greget

Membuat Tampilan Widget Label Blog Menjadi Lebih Greget

Widget Label atau Category adalah sebuah widget yang menghubungkan antara posting satu dengan posting lainnya yang saling berkaitan (satu label). Widget ini cukup berguna jika di pasang dalam blog anda. Salah satu fungsinya adalah agar pengunjung lebih mudah untuk melihat dan mengetahui semua label atau category dalam blog.

Pada kesempatan kali ini saya akan berbagi cara membuat, memodifikasi serta mengedit widget label cloud menjadi lebih menarik bin greget untuk di lihat.
Dibawah ini bisa kita lihat contohnya:

Ok untuk cara pembuatannya ikuti langkah langkah berikut:

1. Siapkan Es teh bila anda haus.
2. Login ke dalam akun blogger anda.
3. Menuju tata letak > add widget > pilih widget label.
4. Ubah tampilan "Daftar" Menjadi "Cloud". Lihat contoh gambar di bawah:
   
   
5. Simpan widget.
6. Kemudian kita menuju ke Template > Edit HTML.
7. Cari kode ]]></b:skin> (seperti biasa gunakan senjata CTRL+F agar lebih cepat untuk mencari), kemudian letakkan kode berikut di atas kode ]]></b:skin>
   
   
   /*-----Labels Cloud Styled widget by proBlogiz.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; }
8. Save Template.