Cara Menciptakan Label Cloud Keren Dan Anggun Diblog

Cara Membuat Label Cloud Keren dan Cantik - Setiap blog tentunya mempunyai kemudahan Label widget, pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit perhiasan isyarat CSS widget label type cloud ini dapat dipercantik tampilanya di blog. 

Kurang lebihnya ibarat gambar dibawah ini sobat:

  
Label di blog ialah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Anda. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memperlihatkan navigasi yang gampang bagi pembaca blog. Pada Blogger semenjak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya ialah Page List and Label Cloud List dengan enable deisgner untuk menciptakan dynamic menus.

Intinya share kali ini untuk merubah widget label biar lebih cantik. dengan CSS dibawah ini akan mewarnai label sahabat menjadi keren dan menarik. Berikut penjelasannya:

 ::Cara Membuat Label Cloud Keren dan Cantik diblog::

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template
3. Tekan Control + F > cari isyarat ]]></b:skin>
4. Jika sudak ketemu, Copy isyarat CSS dibawah ini dan Pastekan/letakkan kodenya sempurna diatas isyarat ]]></b:skin>

 /*-----Labels Cloud Styled widget by proBlogiz.blogspot.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; 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; }

5. Save Template

Keterangan !!!

Pastikan label pada blog sudah terpasang dan dibentuk Cloud bukan List.

Share this post