Memasang Label Cloud Colorful by KIR SMANSAKA

Selamat siang sobat blogger, 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 dan ikuti pengaturannya sesuai dengan gambar di bawah ini

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.

DEMO

• Lihat Disini

Cukup sekian dan semoga bermanfaat.