Memasang Label Cloud Colorful

Memasang Label Cloud Colorful

Pada kesempatan kali ini Saya akan berbagi sedikit tips tentang cara memasang label cloud colorful.

Seperti yang kita tahu, tampilan label cloud bawaan blogger terlihat cukup membosankan dengan warna putih polos dan teks hitam. Nah disini Saya akan mencoba untuk mengubah tampilannya menjadi colorful dan terlihat fresh tentunya.


Berikut cara pemasangannya :

Catatan : Sebelumnya Sobat harus menghapus terlebih dahulu kode CSS untuk label di template.


Pertama Sobat harus menambahkan widget label di blog

Buka Blogger > Tata Letak > Tambahkan Gadget > Lalu tambahkan widget Label.

Kemudian Simpan.

Selanjutnya, buka Template > Edit HTML > Lalu pastekan kode CSS di bawah ini tepat diatas ]]></b:skin> atau </style> 

.sidebar .label-size {
  position:relative;
  text-transform:uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Arial;
  color:#fff!important;
  }
.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  transition: all 0.4s ease-in-out;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Terakhir Simpan Template dan lihat hasilnya.

Cukup sekian dan semoga bermanfaat.