Cara Membuat Widget Label Keren Bergerak

Pada postingan kali ini saya akan membahas bagaimana Cara Membuat Widget Label Keren Bergerak dan menjadi lebih menarik, biasanya widget label yang telah di sediakan oleh blogger dari tampilannya sendiri terlihat biasa-biasa saja, terkadang tidak ada daya tarik tersendiri, nah untuk memperindah tampilan widget label pada saat mouse atau kursor di sorot, object di dalam widget label akan bergerak beberapa derajat, sehingga mempunyai daya tarik untuk pengunjung blog kita.

Fungsi dari widget label adalah untuk mempermudah para pengunjung sehingga dapat menemukan dari artikel yang di cari, untuk itu tidak ada salahnya jika kita memberikan sesuatu yang beda terhadap widget label di blog yang kita punya.

Untuk contoh widget label tersebut, anda bisa lihat pada gambar postingan di atas atau bisa juga melihat di bagian footter pada blog ini yang terpasang sebuah widget label seperti yang sedang di bahas sekarang ini, dan untuk cara pemasangan atau pembuatannya adalah dengan menambahkan kode CSS di dalam blog kita, di bawah ini adalah langkah-langkah pembuatannya :

Langkah Pertama
Silahkan anda login ke Blog anda atau bisa juga klik URL www.blogger.com

Langkah Kedua
Setelah login berhasil, silahkan anda ke dasboard, lalu pilih Tata Letak/Layout.

Langkah Ketiga
Tambahkan Widget/Add a Gadget pada blog anda, lalu pilih Label.

Langkah Keempat
Dibagian Konfigurasi Label, silahkan anda pilih Cloud pada bagian Display, lalu Save.

Langkah Kelima
Jika pemasangan widget label sudah di lakukan, selanjutnya silahkan ke bagian Template untuk meletakan kode CSS ke dalam blog anda. Silahkan anda Copy lalu Pastekan kode di bawah ini tepat diatas atau sebelum kode ]]></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; }

Langkah Keenam
Apabila kode CSS di atas sudah di letakkan kedalam blog, lalu Simpan Template. selanjutnya lihat hasilnya pada blog anda.

Langkah Ketujuh
Selesai.

Jika anda mengikuti langkah-langkahnya dengan benar, maka untuk tampilan pada widget label akan seperti label pada blog ini atau seperti pada gambar postingan paling atas. Selamat mencoba...

Share this post