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.
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...
Demikian artikel tentang Cara Membuat Widget Label Keren Bergerak ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Widget Label Keren Bergerak ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
