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.