Tutorial kali ini saya akan share tentang Cara Membuat Label Flat UI di Blog. Silajkan lihat demo label di bawah ini, lebih kurang tampilann...
Tutorial kali ini saya akan share tentang Cara Membuat Label Flat UI di Blog. Silajkan lihat demo label di bawah ini, lebih kurang tampilannya akan seperti demo di bawah ini. Jika tertarik silahkan ikuti tutorial berikut ini.
Login ke accunt blogger sobat.
Silahkan Backup Template Sobat.
Klik Template >> Edit HTML >> Gunakan Ctrl F.
Selanjutnya cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas kode ]]></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:400;
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}
Catatan : sobat harus sudah menambahkan widget label dengan tampilan cloud.
Terakhir simpan Template dan selesai. Semoga tutorial tentang Cara Membuat Label Flat UI di Blog Berhasil.
COMMENTS