Widget Label Keren

Disini saya akan membahas tentang cara membuat Widget Label Keren, Widget label / daftar isi keren ini merupakan sebuah widget yang mempunyai tampilan yang dinamis dan menarik serta mempunyai kelebihan tersendiri, diantanya jika widget label pada saat mouse atau kursor di arahkan ke label, object di dalam widget label akan bergerak beberapa derajat.

Langkah-langkah :

1. Masuk ke Blogger anda
2. Masuk ke Tata Letak
3. Tambahkan Widget/Add a Gadget
4. Pilih Labels
5. Di bagian Configure Labels, pilih display Cloud
6. Simpan Widget
7. Masuk Template, lalu Edit HTML

Taruh kode berikut sebelum/di atas ]]></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; }

8. Simpan Template
9. Lihat Blog Anda

Selamat Mencoba, Semoga berhasil.  :)

Tweet