Si Tukang Copas - Selamat datang di postingan 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.
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 :)
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)
Title : Cara Membuat Label Blog Menjadi Warna-Warni
Description : Si Tukang Copas - Selamat datang di postingan Cara Mudah Membuat Widget Label Blog Menjadi Warna Warni Widget. Label yang di sediakan oleh ...
