Cara Membuat Label Keren Dengan Efek Bergerak

Table of Contents

Bangiz - 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.  

Label keren

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.

Itulah cara membuat label blog keren dengan efek bergerak. Jangan lupa ikuti +Bangiz untuk mendapatkan info keren lainnya.