Cara Membuat Widget Label Menjadi Full Color

Cara Membuat Widget Label Menjadi Full Color - Hay, sobat tutorialku? Apa kabar! Jika pada artikel sebelumnya saya telah Berbagi tips Cara Memasang Widget Alexa di Blog. Nah, pada kesempatan kali ini saya akan berbagi tips Cara Membuat Widget Label Menjadi Warna-Warni. Widget yang kita buat warna-warni ini adalah widget label atau bisa juga disebut widget kategori.

Untuk yang udah ngak sabar dengan tutorial kali ini, langsung saja disimak dibawah ini langkah-langkahnya dengan teliti :)

Langkah Pertama: Memasang Widget Label di Blog 

• Masuk ke Akun Blogger kalian
• Pilih Menu Tata Letak kemudian klik Tambahkan Gadget

• Cari dan Pilih Widget Label dengan mengklik tombol plus (+)

• Selanjutnya, pada pengaturan bagian tampilan pilih Cloud, dan sisanya silahkan anda ubah sesuai dengan keinginan.

• Terakhir Simpan Gadget.

Langkah Kedua: Memasang kode CSS di Blog

• Pilih menu Template lalu klik Edit HTML

• Cari kode ]]></b:skin> ( gunakan Ctrl+F untuk memudahkan )
• Copy kode berikut lalu pastekan tepat diatas kode ]]></b:skin>

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#abc123;font-size:15px;}
#Label1 .label-size-2 a {background:#5cc9cd;font-size:15px;}
#Label1 .label-size-3 a {background:#e24f4f;font-size:15px;}
#Label1 .label-size-4 a {background:#f568dc;font-size:15px;}
#Label1 .label-size-5 a {background:#38a3ee;font-size:15px;}
#Label1 .cloud-label-widget-content span a:hover {background:#007abe;}  

Keterangan:

1. Kode yang berwarna-warni akan muncul sebagai warna pada setiap label, bisa kalian ubah sesuai selera masing-masing.
2. Kode yang berwarna #007abe akan muncul sebagai warna saat cursor diarahkan pada label, bisa kalian ubah sesuai selera masing-masing.

• Terakhir Simpan Template.

Bagaimana? mudah dan menarikan hasilnya. Sekian artikel saya kali ini tentang "Cara Membuat Widget Label Menjadi Full Color", semoga dapat bermanfaat untuk anda semua. Jika ada masalah jangan ragu ajukan disini. Sampai Jumpa :)