Cara Membuat Label Keren Dengan Efek Bergerak

Setelah sebelumnya saya pernah posting tentang Cara Membuat Label Cloud Keren dan Cara Membuat Tombol Share Sosial Media Melayang Dengan HTML. Pada kesempatan kali ini saya akan memberikan trik cara membuat label lagi tantunya dengan efek berbeda. Untuk yang sekarang, gambarannya kalau labelnya dedekati mouse maka ia akan bergerak miring atau berputar tergantung pengaturan derajatnya.

 

 

Oke langsung saja jika Anda tertarik untuk menggunakannya ikuti langkah-langkahnya berikut ini:

1. Masuk ke Dashboard Blogger

2. Pilih Template > Edit HTML

3. Cari kode ]]></b:skin>
    Gunakan Ctrl + F jika Anda belum tahu letaknya

4. Copy-Paste kode CSS berikut tepat di atas / sebelum kode ]]></b:skin>

.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 #6BB5FF; 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 dan lihat hasilnya

Catatan:

Pastikan Anda sudah menambahkan widget label yang ada pada bawaan blogger. Kalau belum tahu, caranya masuk ke Dasbor Blogger > Tata Letak > Tambahkan Gadget > Cari Label.