Minggu, 07 Mei 2017

Cara Membuat Widget Label Cloud Blog Menjadi Warna Warni

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.

Widget Label Cloud Blog Warna Warni
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.

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"
Memasang Widget Label Cloud Blog
  • Setelah itu klik "Simpan"
Nah, sekarang kita memasuki tahap mendesain label cloud blog menjadi warna warni.

Langkah Kedua: Memasang Kode CSS di Blog

  • Masuk ke blogger.com
  • Pilih Menu "Template" lalu klik "Edit HTML"
Edit HTML Template Blogger
  • 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: &#39;Open Sans&#39;,&quot;Segoe UI&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 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.

20 comments:

  1. menurut saya warna warni gak menarik mas.. kebih sukanya satu warna tapi elegan. Tapi tergantung pribadi masing-masing sih hehe. salam kenal

    BalasHapus
    Balasan
    1. Betul mas, tergantung selera masing".. Saya sendiri sebenernya lebih suka yang simple" saja.. hehe.. salam kenal.

      Hapus
  2. Keren gan, thenks infonya

    BalasHapus
  3. wah keren gan. tapi mnrt ku simple lebih baik :D

    BalasHapus
    Balasan
    1. Yap.. kembali ke selera masing masing gan..

      Hapus
  4. Keren mantap gan artikel nya jadi tidak sabar mau praktein

    BalasHapus
  5. makasih gan tutorialnya. bermanfaat sekali

    BalasHapus
  6. untuk template tertentu label yang warna warni memang terlihat menarik sob., tapi kalau saya lebih suka yang satu warna sob., :)

    BalasHapus
  7. Izin bookmark gan... Sebenarnya yg saya cari kode nth childnya... Trims

    BalasHapus

Tata Tertib Berkomentar :
1.) Berkomentarlah dengan sopan sesuai dengan topik artikel.
2.) Jangan sertakan link aktif dalam komentar, karena saya pasti akan mengunjungi balik blog sobat.
3.) Jika artikel ini bermanfaat bagi sobat, bagikan artikel ini ke teman-teman sobat melalui Facebook, Google+, Twitter dan lain lain, karena "berbagi itu indah" hehehe.

Terima kasih sudah berkunjung.