Cara Membuat Label Cloud Flat Keren

Tips And Trik Trik Blog

AkuDuluAnak.Tk - Selamat pagi sobat bagaimana pagi mu ^_^ pasti menyenangkan. Di pagi yang cerah ini saya mau kasih tutorial bagaimana membuat widget label dengan tema flat yang keren lihat screenshot dibawah.

Mari kita simak cara pemasangannya.

• Pergi ke Blogger >> Layout >> Add a Gadget.
• Tambahkan Labels.
• Dan atur seperti dibawah 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 dan kita lihat hasilnya.

Bagaimana? mudah bukan jika ada yang ditanyakan bisa ditanyakan di kolom komentar atau bisa kontak saya langsung :)

Bagikan

Jangan lewatkan

Cara Membuat Label Cloud Flat Keren

4/ 5

Oleh Rijal Imnida

Rijal Imnida 08:16 7 Komentar