Buatlah Label Cloud-mu menjadi Colorful

Tips n Trik berikut adalah tentang cara memasang label cloud colorful, biar blog kita makin berwarna gitu.

Tahukan bahwa tampilan label cloud bawaan blogger terlihat cukup membosankan dengan warna putih polos dan teks hitam. Nah disini aku akan berbagi bagaimana mengubah tampilannya menjadi colorful dan terlihat fresh banget.

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

Setingan 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.

• DEMO
• DOWNLOAD

Cukup sekian dan semoga bermanfaat.

Related Posts:

Tweet