Cara Membuat Widget Label Lebih Menarik

Halo sob, kali ini saya akan memostingkan sebuah artikel yang berisi tentang tutorial cara membuat label keren dan bergerak dan tentunya akan menjadi lebih menarik. Biasanya widget label yang telah disediakan oleh blogger dari tampilanya sendiri terlihat biasa-biasa saja, terkadang kan kita tidak tertarik ya? apalagi pengunjung blog sobat. Nah, untuk memperindah tampilan widget label pada saat mouseatau kursor disorot, object dalam label akan bergerak beberapa derajat sehingga mempunyai daya tarik untuk pengunjung blog sobat semua. Fungsi dari widget label yaitu untuk mempermudah para pengunjung untuk lebih mudah dapat menemukan dari artikel yang dicari.untuk itu tidak ada salahnya jika kita memberikan sesuatu yang beda terhadap widget label di blog yang kita punya. Dan untuk cara pemasangan atau pembuatannya adalah dengan menambahkan kode CSS di dalam blog sobat.

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 label sudah dilakukan, selanjutnya klik ke bagian Template untuk meletakkan kode CSS ke blog sobat. Silahkan sobat copy kode warna dibawah ini tepat diatas atau sebelum kode ]]></b:skin> : (NB: Untuk memudahkan mencari kode tersebut, tekanlah Ctrl+F / F3) 

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

Semoga bermanfaat ya sob, saya pamit dulu :) ... Jangan Lupa Komentarnya ya ..!