Cara Membuat Label Cloud Flat Keren

Label pada blog biasa menunjukan suatu postingan atau artikel tertentu. Membuat blog menarik tidak hanya dari segi kata saja atau tulisan yang original namun juga dari tampilan. Ketika blog sudah memiliki tampilan yang keren maka tidak mungkin orang akan selalu berkunjung ke blog kita dengan di iringi artikel terbarunya. Sehingga salah satu untuk membuat blog menarik adalah dengan memberikan label yang keren seperti pada gambar di bawah ini.

dan Untuk membuat gambar yang seperti diatas caranya cukup mudah dan juga simpel. caranya adalah sebagai berikut :

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

Untuk jelasnya lihatlah gambar di bawah ini :

• Lalu klik Save .
• Sekarang masuk ke Template >> Edit HTML
• Cari kode


  ]]></b:skin>

• Copy dan pastekan kode dibawah ini tepat diatas ]]></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 Setelah itu kamu bisa melihat hasilnya.

Tweet

Subscribe to receive free email updates: