Memperindah Tampilan Widget Label

Halo sob para blogger para pengunjung yang terhormat, 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, di bawah ini adalah langkah-langkah pembuatannya :

1. Login ke akun "blogger" sobat
2. Setelah login berhasil, pilihlah "Tata Letak"
3. Kemudian tambahkan Gadget, lalu pilih "Label"

4. Dibagian Konfigurasikan label, lalu pilih Cloud dibagian Tampilkan, lalu Save

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


.:: Copy Kode dibawah ini [Block] ::.

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

6. Jika kode CSS di atas sudah diletakkan, lalu "Simpan Template".

7. Selesai, dan lihat hasilnya.

 

 

www.ebolaubiquitous.blogspot.com/memperindah-tampilan-widget-label.html