Cara Memasang Label Cloud Keren di Blogger

Cara Memasang Label Cloud Keren di Blogger – Label atau kategori adalah cara mengelompokan jenis artikel berdasarkan pembahasan yang berkaitan. Pada blog atau website sudah pasti memiliki beberapa label yang terdiri dari beberapa artikel sesuai dengan keinginan pemiliknya. Jika anda memiliki blog gado-gado sudah pasti memiliki banyak label.

Nah, kali ini saya akan memberikan tutorial untuk mempercantik tampilan label cloud pada blogspot. Secara default tampilan label cloud akan biasa saja dengan tampilan khasnya yaitu putih, untuk memberikan kesan beda dengan yang default, saya akan memberikan beberapa koleksi saya untuk modifikasi tampilan label cloud agar keren dan cantik.

Memiliki tampilan blog yang elegan dan enak dipandang sudah pasti menjadi tujuan setiap blogger yang bertujuan agar pengunjung bisa dengan enak menikmati blog kita. Tentu dengan dukungan artikel yang berkualitas maka blog akan menjadi populer.

Cara Memasang Label Cloud Keren di Blog

Cara Membuat Label Cloud Keren dan Cantik di Blog

Berikut beberapa kolesi label cloud yang bisa anda pilih dan mencobanya di blog, semua tampilan segar dan tidak mempengaruhi kecepatan loading blog.

Kode Label Cloud Kerenlabel cloud keren blogger

/* label cloud seo indigo*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 { font-size:100%; filter:alpha(100); opacity:10 }
.cloud-label-widget-content{ text-align:left }
.label-size { background:#2ea9da; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; }
.label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; }
.label-size:hover { background:#333333; }
.label-size { line-height:1.2 }
.label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }

Keterangan:
Untuk mengganti warna silahkan ganti kode warna yang berwarna merah diatas. Silahkan sesuaikan konfigurasi label seperti ini:label cloud blogspot keren

  • Pilih tampilkan Cloud
  • Centang pada tampilkan jumlah entri per label

Kode Label Cloud Flat UICara Membuat Label Cloud Keren dan Cantik di Blog

/* label cloud seo indigo*/
.Label a{padding-left: 5px;padding-right: 31.5px;color: #fff!important;height: 32px;background: #1abc9c;margin-right: 2px;line-height: 32px;
text-decoration: none;border: none !important;-webkit-transition: all .3s ease-in-out !important;float: left;margin-top: 2px;font-size: 13px;text-align: left; }
.Label a:hover{color:#fff !important;background:#16a085; }
.Label a:after{content: "";position: absolute;width: 0px;height: 0px;border-width: 16.5px;border-style: solid;border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

Keterangan:
Untuk mengganti warna silahkan ganti kode warna yang berwarna merah diatas.

Lakukan konfigurasi label seperti gambar dibawah ini:
membuat label cloud keren

  • Pilih tampilkan Cloud
  • Hilangkan centang pada tampilkan jumlah entri per label

Membuat Label Cloud Super Keren di Blogmemasang label cloud keren di blogspot

/* label cloud*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10;float:left;width:48%;}
.cloud-label-widget-content{text-align:left}
.label-size{border-radius:3px;display:block;float:left;line-height:normal;margin:0 3px 3px 0;color:#ffffff;font-size:12px;max-width:100%;text-transform:capitalize;}
.label-size:hover{background:#337DAE;transition:.5s}
.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:500;}
.label-size a{background:#337DAE;border-radius:3px;font-weight:400;}
.label-size a:hover{font-weight:500;transition:.5s}
.label-count{float:right;white-space:nowrap;border-radius:3px;padding-right:3px;margin-left:-3px;background:#E0492C;color:#fff !important;}

Lakukan konfigurasi seperti dibawah:memasang label cloud di blog

Cara Memasang Label Cloud Keren di Blogger

  1. Silahkan login dahulu ke akun blogger anda.
  2. Kemudian pilih Template lalu Edit HTML
  3. Cari Kode ]]></b:skin> untuk mempercepat pernacarian gunakan CTRL + F
  4. Copy Code yang sudah anda pilih diatas tadi, kemudian letakkan tepat diatas Kode ]]></b:skin>
  5. Jangan Lupa Simpan, selanjutnya pasang label cloud di sidebar blog anda. jika belum bisa ikuti petunjuknya dibawah ini:

Cara Memasang Label Cloud di Sidebar

  1. Masih pada dasbor blogger.
  2. Pilih Tata Letak lalu pilih Tambahkan Gadgetcara menambah gadget di blogger
  3. Kemudian pilih Label, lakukan konfigurasi seperti pada keterangan diatas.cara memasang widget label di blog
  4. Selesai.

Bagaimana mudah bukan? silahkan cermati tutorial diatas untuk memasang label cloud keren di blog. Perhatikan mulai dari kode label dan melakukan konfigurasi label pada widget.

Baca juga: Cara Membuat Popular Post Keren Berwarna di Blogger

Semoga bermanfaat, jika masih kesulitan silahkan tinggalkan pesan.

Leave a Reply