Membuat Tag Cloud Flat Yang Cantik

Fungsi label sangat berguna ditampilkan dalam sesebuah blog. Ianya memudahkan pelawat mencari konten yang ingin mereka lihat. Untuk mencantikkkan blog label boleh dicantikkan dengan memasang tag cloud atau label cloud seperti gambar di bawah. Untuk demonya klik DISINI

Cara membuatnya mudah, iaitu :-

• Pergi ke Blogger >> Layout >> Add a Gadget.
• Tambahkan Labels.
• Pilih Cloud

• Kemudian klik Save .
• Sekarang masuk ke Template >> Edit HTML
• Cari kode     ]]></b:skin>

Copy dan pastekan kod di bawah ini tepat di atas ]]></b:skin>

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

Simpan template dan lihat hasilnya.