Cara Membuat Label Blog Menjadi Warna-Warni

Cara Mudah Membuat Widget Label Blog Menjadi Warna Warni - Widget label yang di sediakan oleh blogger berguna untuk men-kategorikan artikel anda. Anda bisa sesuka hati menamai label/kategori di artikel anda. Widget ini juga penting untuk blog selain untuk SEO widget ini juga dapat membuat pengunjung melihat post anda sesuai dengan apa yang dia inginkan, semisal pengunjung menginginkan post tentang tutorial blog dan di blog anda ada label tutorial blog, akhirnya pengunjung bisa memilih post menurut kategori di blog anda.

Label Cloud Warna Warni

Tadi saya sempat share cara mendesain widget popular post menjadi warna - warni di blog, kali ini saya juga akan share tentang tutorial yang membuat blog anda menjadi berwarna yaitu cara mendesain/membuat widget label blog menjadi warna-warni *Setelah widget popular post yang warna-warni, sekarang widget label yang warna-warni :D*. Untuk penampakan widget-nya anda bisa melihat gambar di atas tadi. Berminat untuk memodifikasi label blog anda menjadi lebih menarik? silahkan simak tutorial saya kali ini!

Tutorial Mendesain Widget Label Menjadi Warna-Warni :

1.) Masuk ke dasbor blogger -> Pilih menu Template -> Lalu klik Edit HTML

2.) Cari kode ]]></b:skin> atau kode </style>

3.) Masukkan CSS di bawah ini di atas kode tadi.

.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

4.) Jangan lupa klik Simpan Template, selesai :)
Baca Juga : Cara Mendesain Widget Popular Post Menjadi Warna Warni Seperti Evo Magz
UPDATE! 
Jika blog anda memiliki lebih dari 20 label , silahkan tambahkan lagi kode CSS ini :

.label-size:nth-child(21) {
background: #Kode Warna;
}
.label-size:nth-child(22) {
background: #Kode Warna;
}
.label-size:nth-child(23) {
background: #Kode Warna;
}
.label-size:nth-child(24) {
background: #Kode Warna;
}

Angka yang saya beri warna hijau adalah nomor label (Di kode css sebelumnya sudah ada 20 label), jika label anda masih lebih dari 24 silahkan tambahkan lagi kode css tambahan tadi dan ganti angkannya dengan angka jumlah label berikutnya.
Jangan lupa ganti tulisan yang berwarna Merah dengan kode warna (HTML)
Anda bisa melihat kode warna di http://www.mas-aldi.com/p/flat-ui-color.html
Selamat mencoba :)

Cara Membuat Label Blog Menjadi Warna-Warni 2014-10-30T17:17:00+07:00 Rating: 4.5 Diposkan Oleh: Anonymous