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. Supaya tidak penasaran lihat dulu saja demonya.
Sudah ketemu dan melihat kan?! Kalau tidak ketemu, letaknya sebelah kiri. 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