Subscribe to KLIK INFO by Email
Widget label yang disediakan oleh Blogger berguna untuk memberi kategori pada postingan sobat. Sobat bisa bebas memberi nama label/kategori pada postingan sobat. Kegunaan lain widget label ini adalah supaya pengunjung blog lebih mudah mencari postingan yang di inginkan berdasarkan kategori yang ada. Semisal pengunjung ingin mencari artikel tentang Tutorial Blogging, pengunjung tinggal mengklik label/kategori tutorial blogging pada blog sobat.
Kemarin saya telah membagikan Cara Memberi dan Memasang Widget Label di Blog. Nah, supaya pengunjung blog lebih tertarik untuk mencari postingan blog sobat melalu label, sobat bisa menghias label blog sobat sehingga menjadi keren seperti gambar diatas.
Berminat untuk memodifikasi label blog sobat menjadi full color sehingga membuat pengunjung blog tertarik? Silahkan disimak artikel tutorial dari saya kali ini.
- Kode yang berwarna biru adalah kode warna pada label. Jadi, sobat bisa mengganti warna label sesuka hati sobat.
- Angka yang saya beri warna hijau adalah nomor label. Di css sebelumnya sudah ada 20 label, jika sobat ingin menambahkan lagi lebih dari 20, silahkan tambahkan kode css tersebut, dan ganti angkanya dengan jumlah label berikutnya.
- Lalu ganti tulisan berwarna merah dengan kode warna yang sobat inginkan.
* Untuk kode warna, bisa dilihat Disini.
Berminat untuk membuat blog sobat menjadi lebih colorfull? Baca juga: Cara Membuat Widget Popular Post Blog Menjadi Warna Warni
Sekian dulu tutorial dari saya kali ini, jika masih bingung/ada pertanyaan silahkan bertanya di komentar. Semoga Bermanfaat.
Widget label yang disediakan oleh Blogger berguna untuk memberi kategori pada postingan sobat. Sobat bisa bebas memberi nama label/kategori pada postingan sobat. Kegunaan lain widget label ini adalah supaya pengunjung blog lebih mudah mencari postingan yang di inginkan berdasarkan kategori yang ada. Semisal pengunjung ingin mencari artikel tentang Tutorial Blogging, pengunjung tinggal mengklik label/kategori tutorial blogging pada blog sobat.
Berminat untuk memodifikasi label blog sobat menjadi full color sehingga membuat pengunjung blog tertarik? Silahkan disimak artikel tutorial dari saya kali ini.
Cara Membuat Widget Label Cloud Menjadi Warna Warni di Blogger
Langkah Pertama: Memasang Widget Label Cloud di Blog
- Pertama, sobat harus memasang widget label terlebih dahulu. Untuk tutorial memasang widget label di blog, bisa dilihat disini.
- Pada saat sobat Men-Konfigurasikan Label, pada bagian "Tampilkan" pilih "Cloud"
- Setelah itu klik "Simpan"
Langkah Kedua: Memasang Kode CSS di Blog
- Masuk ke blogger.com
- Pilih Menu "Template" lalu klik "Edit HTML"
- Cari kode ]]></b:skin> atau kode </style> (Supaya lebih mudah, tekan Ctrl+F)
- Masukkan 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 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; }Keterangan :
- Kode yang berwarna biru adalah kode warna pada label. Jadi, sobat bisa mengganti warna label sesuka hati sobat.
- Terakhir, klik "Simpan"
Tambahan: Jika ingin memberi warna lebih dari 20
Jika sobat merasa masih kurang warna-warni, sobat juga bisa menambah warna label cloud, dengan menambahkan lagi Kode CSS dibawah ini, diatas kode ]]></b:skin> atau kode </style>.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 : - Angka yang saya beri warna hijau adalah nomor label. Di css sebelumnya sudah ada 20 label, jika sobat ingin menambahkan lagi lebih dari 20, silahkan tambahkan kode css tersebut, dan ganti angkanya dengan jumlah label berikutnya.
- Lalu ganti tulisan berwarna merah dengan kode warna yang sobat inginkan.
* Untuk kode warna, bisa dilihat Disini.
Berminat untuk membuat blog sobat menjadi lebih colorfull? Baca juga: Cara Membuat Widget Popular Post Blog Menjadi Warna Warni
Sekian dulu tutorial dari saya kali ini, jika masih bingung/ada pertanyaan silahkan bertanya di komentar. Semoga Bermanfaat.