Cara Membuat Widget Label Super Keren Bergerak agar Blog tampak 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 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.
Langkah Pertama
Silahkan anda login ke Blog anda
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 paste 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
Finish........................................................
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...
EmoticonEmoticon