Label pelbagai warna

Kali ini saya akan membuat tutorial bagaimana untuk membuat widget label pelbagai warna .Anda boleh melihat demo untuk lebih jelas.. Untuk mengetahui lebih lanjut boleh melihat demonya dibawah sebelum mencuba.(Label widget berada dibawah sekali )

Pasang Label Pelanggi

Langkah 1) Dari Blogger Dashboard, pergi Layout and klik pada Add Labels.

Pastikan sebelum save anda perlu tick clound untuk display.

Langkah  2) Cari kode dibawah ini .
                     (Klik Ctrl dan F untuk bar carian untuk membantu mencari kode)

]]></b:skin>

Langkah 3) Selepas itu copy kode dibawah dan pastekan di atas kode yang anda cari tadi .

#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:#1850E8;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:#1850E8;}

Nota:

• Kode yang berwarna merah merupakan sebagai warna pada setiap label,anda boleh ubah mengikut kehendak anda
• Kode yang berwarna orange merupakan sebagai warna apabila cursor diletakkan kearah label dan warna akan berubah, yang ini jugak anda boleh mengubah mengikut kehendak anda.
• Untuk pilih kode warna, Anda boleh KLIK Disini untuk memilih Kode Warna HTML