Tips Membuat Widget Label Bergerak Pada Blog

Pada post kali ini saya akan memberikan tips untuk memperbagus tampilan Widget Label kalian. Apabila biasa nya pada saat kalian membuat sebuah Widget Label dengan tampilan biasa sekarang kalian bisa membuatnya dengan animasi bergerak, bagaimana cara nya? Langsung saja ikuti cara berikut.

Pertama

Login ke Blogger kalian masing-masing

Kedua

Pada saat di Dasboard kalian masuk ke blog yang kalian ingin edit

Ketiga

Buka bagian Tata Letak/Layout

Keempat

Cari Widget Label kemudian tambahkan

KelimaApabila sudah kalian tambahkan ke blog kalian sekarang dari code List ubah menjadi Could dan Save

Keenam

Apabila sudah kalian lakukan save kemudian kita masuk kebagian Template untuk meletakan kode yang akan dimasukan

Ketujuh

Kemudian kita cari kode HTML "]]></b:skin>" tanpa tanda petik untuk mempermudah pencarian terhadap kode gunakan "CTRL+F" tanpa tanda petik. Letakan kode berikut tepat di atas kode "]]></b:skin>" 

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:9px; 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; }