Cara Modifikasi Tampilan Widget Label / Tag Cloud Di Blogger

Pada postingan sebelumnya telah dibahas cara membuat Label/ Tag cloud di blogspot yang membuat tampilan label menjadi lebih menarik. dan pada postingan kali ini kita akan memodifikasi tampilan widget Label Cloud menjadi seperti gambar diatas.

Bagaimana Cara Modifikasi Tampilan Widget Label / Tag Cloud Di Blogger?

Langkah 1
Memasang widget Label pada Layout/ Tata Letak
1. Buka Layout/ Tata Letak >> tambahkan Gadget >> pilih Label
2. Atur widget Label seperti gambar berikut:

3. Simpan gadget

Langkah 2
Menambahkan kode CSS pada template
1. Buka Template >> Sesuaikan/ Customize
2. Pilih Tingkat lanjut/ advanced >> Tambahkan CSS
3. Paste kode berikut pada kolom CSS

/* Flat UI Labels Cloud By Www.BloggerYard.Com ---------------- */

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  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;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

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

4. Klik Terapkan ke Blog untuk menyimpan perubahan.

Lihat tampilan blog, seharusnya tampilan widget Label/ Tag telah berubah.

sumber bloggeryard.com