Membuat Cloud Label Keren Bisa Bergerak Terbaru
Pasti bosan kan ketika tampilan blog kita gitu - gitu aja pastinya, atau cuma sekedar iseng buat modifikasi sedikit tampilan blog kita.
Kali ini ialah bagaimana cara Membuat Cloud Label Keren Bisa Bergerak ketika kursor mouse diarahkan ke label.
Untuk contoh atau demo nya bisa dicoba di blog saya ini, dan coba arahkan mouse anda ke label tertentu (jika belum saya ganti).
Oke langsung aja kita ke tutorial nya tanpa basa basi :
- Buka edit html di template anda
- Cari kode */]]></b:skin>
- Jika sudah ketemu langsung aja copy paste kode dibawah ini di atas kode */]]></b:skin>
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #333; border-radius: 3px; float:left; text-decoration:none; font-size:12px; 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; }
- Jika sudah klik simpan dan lihat hasilnya
- Untuk Collor bisa di ganti sesuai kebutuhan tinggal di utak atik aja sambil belajar.
0 komentar: