Tutorial Blog, Ms. Office, Android, Komputer dan Internet

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.

Cara Memasang Label Cloud Keren di Blog

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 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 Keren

Cara Memasang Label Cloud Keren di 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:
memasang label cloud di blog

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

Kode Label Cloud Flat UI

Cara 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 Blog Versi 3

memasang 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:

    Memasang Label Cloud di Sidebar

    1. Masih pada dasbor blogger.
    2. Pilih Tata Letak lalu pilih Tambahkan Gadget
      cara 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.

    Semoga bermanfaat, jika masih kesulitan silahkan tinggalkan pesan.
    Tag : Blogger
    0 Komentar untuk "Cara Memasang Label Cloud Keren di Blogger"

    Berkomentarlah sesuai dengan topik dan tidak menaruh link aktif. Terima kasih atas perhatiannya.

    Back To Top