Cara Membuat Label Keren dan Warna-Warni

Cara Membuat Label Cloud Keren dan Warna-Warni - Label widget pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan kita bahas kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya pada blog kita. Ada pilihan 2 Style Label Cloud Blogger, Anda bisa memberi sentuhan baru dan agar lebih menarik tampilan widget label pada blog Anda. 

Nah Untuk membuat dan modifikasi tampilan Label Cloud Blogger seperti pada contoh gambar diatas, Anda hanya perlu menambah kode CSS pada template. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger, kode terebut dapat disesuaikan dengan beberapa kiat untuk membuat desain label lebih menarik.Nah jika anda ingin menambah widget label cloud ini pada blog anda,silahkan ikuti caranya dibawah ini. . .

Cara pasang widget label cloud pada blogger
Langkah Pertama

1.  Masuk Blogger Dasboard > Tata Letak > Klik Tambah Gadget > pilih Label
2. Setting widget Blogger Label > pilih Tampilkan Cloud
3. Untuk pilihan "Sortir" dan "tampilkan semua" atau label yang dipilih terserah Anda

Lihat gambar dibawah untuk lebih jelasnya

Langkah Kedua

1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template anda,untuk berjaga-jaga seandainya terjadi kesalahan
3. Tekan Control + F > cari kode ]]></b:skin>

4. Copy kode CSS dibawah ini
5. Pastekan / letakkan kodenya tepat DIATAS tag ]]></b:skin>
6. Save Template

/*-- Label Cloud --*/
/**Multihued Label By http://www.bloggerspice.com**/
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 4px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:3px 4px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:3px 4px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:11px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:11px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:11px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:11px;}
#Label1 .cloud-label-widget-content span a:hover {background:#006400;}

Refresing homepage/blog dan lihatlah hasil tampilan label cloud blogger dengan new style di Blog Anda.Anda juga bisa memodif atau mengedit kode CSS diatas, terutama kode-kode warna/color background, color font, size,hover color dan lainnya yang bisa diganti dengan selera Anda. 

Bagaimana apakah artikel ini bisa membantu anda? jika iya silahkan tinggalkan komentar manis anda disini.. terima kasih

Tweet