Trik Membentuk Widget Label Cloud Blog Sebagai Warna Warni

Baca Pula

Widget label yang disediakan oleh Blogger bermanfaat buat memberi kelompok pada postingan sobat. Sobat dapat bebas memberi nama label/kelompok pada postingan sobat. Kegunaan lain widget label ini merupakan agar pengunjung blog lebih gampang mencari postingan yang pada inginkan sesuai kelompok yang terdapat. Semisal pengunjung ingin mencari wetsartikel mengenai Tutorial Blogging, pengunjung tinggal mengklik label/kelompok tutorial blogging pada blog sobat.

Hari kemarin aku sudah membagikan Trik Memberi serta Memasang Widget Label pada Blog. Nah, agar pengunjung blog lebih tertarik buat mencari postingan blog sobat melalu label, sobat dapat mempercantik label blog sobat sebagai akibatnya sebagai omdraaien misalnya gambar diatas.
Berminat buat memodifikasi label blog sobat sebagai full color sebagai akibatnya membentuk pengunjung blog tertarik? Silahkan disimak wetsartikel tutorial dari aku kalium ini.

Trik Membentuk Widget Label Cloud Sebagai Warna Warni pada Blogger

Langkah Pertama: Memasang Widget Label Cloud pada Blog

• Pertama, sobat wajib memasang widget label terlebih dahulu. Buat tutorial memasang widget label pada blog, dapat dilihat disini.


• Pada ketika sobat Men-Konfigurasikan Label, pada bagian "Tampilkan" pilih "Cloud"

• Sesudah itu klik "Simpan"

Nah, kini kita memasuki tahap mendesain label cloud blog sebagai warna warni.

Langkah Kedua: Memasang Kode CSS pada Blog

• Masuk ke blogger.com


• Pilih Hidangan "Template" kemudian klik "Edit HTML"

• Cari kode ]]></b:skindangt; atau kode </styledangt; (Agar lebih gampang, tekan Ctrl+F)


• Tambahkan kode CSS dibawah ini diatas 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 Sansdanamp;#39;,"Segoe UIdanamp;quot;,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;
}

Keterangan :
- Kode yang berwarna biru merupakan kode warna pada label. So, sobat dapat mengganti warna label sesuka hati sobat.

Tambahan: apabila ingin memberi warna lebih dari 20

apabila sobat merasa masih kurang warna-warni, sobat pula dapat menambah warna label cloud, dengan menambahkan lagi Kode CSS dibawah ini, diatas kode ]]></b:skindangt; atau kode </styledangt;

.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;
}

Keterangan :
- Nomor yang aku beri warna hijau merupakan nomor label. Pada css sebelumnya telah terdapat 20 label, apabila sobat ingin menambahkan lagi lebih dari 20, silahkan masukkan kode css tadi, serta ganti angkanya dengan jumlah label berikutnya.
- Kemudian ganti goresan pena berwarna merah dengan kode warna yang sobat inginkan.
* Buat kode warna, dapat dilihat Disini.

Berminat buat membentuk blog sobat sebagai lebih colorfull? Baca pula: Trik Membentuk Widget Popular Postbode Blog Sebagai Warna Warni
Sekian dulu tutorial dari aku kalium ini, apabila masih gelisah/terdapat pertanyaan silahkan bertanya pada komentar. Semoga Bermanfaat.

Berbagi :