Widget label - bisa menjadi sebuah kebutuhan para blogger untuk mempermudah para pengunjungnya dalam navigasi dan mencari suatu kategori yang ada pada blog mereka. Widget label yang disediakan oleh blogger ada 2 jenis. Ada yang berbentuk daftar (list) ada juga yang berbentuk Cloud. Pada bentuk list, kategori (label) akan berderet seperti list biasa. Namun, pada bentuk cloud, label akan berbentuk barisan kata yang dimana kata kategori yang lebih banyak akan lebih besar. Bingung jelasinnya wkwk. Oke langsung aja ke CSS nya
CSS
Letakkan kode berikut tepat di atas ]]></b:skin
.label-size {
display: block;
float: left;
background: #555 !important;
margin: 0 1px 1px 0;
color: #eee;
font-size: 100%;
}
.label-size:hover, .label-size a:hover, .label-size span:hover{background:#3384ff;}
.label-size a, .label-size span {
display: inline-block;
color: #fff;
padding: 4px 4px;
}
Atau bisa juga menggunakan cara di bawah ini :
Langkah Pertama : Salin semua kode ini dan letakan di atas </style>
.label-size{background:#2EA9DA;}
#footer-top .label-size:hover{background:#2EA9DA !important;}
.widget-label h2,.widget-label h3{background:#f8f8f8;color:#555;padding:6px 10px;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:14px;font-weight:bold;margin:0 0 0 0;text-transform:uppercase;border-top:3px solid #e8e8e8;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;border-left:1px solid #e8e8e8;}#widget-label-kanan .widget:nth-child(1) h2,#widget-label-kanan .widget:nth-child(1) h3,#widget-label-kanan .widget:nth-child(4) h2,#widget-label-kanan .widget:nth-child(4) h3{border-top:3px solid #E50700 !important;}#widget-label-kanan .widget:nth-child(2) h2,#widget-label-kanan .widget:nth-child(2) h3,#widget-label-kanan .widget:nth-child(5) h2,#widget-label-kanan .widget:nth-child(5) h3{border-top:3px solid #0084C5 !important;}#widget-label-kanan .widget:nth-child(3) h2,#widget-label-kanan .widget:nth-child(3) h3,#widget-label-kanan .widget:nth-child(6) h2,#widget-label-kanan .widget:nth-child(6) h3{border-top:3px solid #6CAC00 !important;}#widget-label-kiri .widget:nth-child(1) h2,#widget-label-kiri .widget:nth-child(1) h3,#widget-label-kiri .widget:nth-child(4) h2,#widget-label-kiri .widget:nth-child(4) h3{border-top:3px solid #00C3B7 !important;}#widget-label-kiri .widget:nth-child(2) h2,#widget-label-kiri .widget:nth-child(2) h3,#widget-label-kiri .widget:nth-child(5) h2,#widget-label-kiri .widget:nth-child(5) h3{border-top:3px solid #FF8168 !important;}#widget-label-kiri .widget:nth-child(3) h2,#widget-label-kiri .widget:nth-child(3) h3,#widget-label-kiri .widget:nth-child(6) h2,#widget-label-kiri .widget:nth-child(6) h3{border-top:3px solid #FFBA0F !important;}#right-post .widget:nth-child(1) h2,#right-post .widget:nth-child(1) h3{border-bottom:3px solid #E50700 !important;}#right-post .widget:nth-child(2) h2,#right-post .widget:nth-child(2) h3{border-bottom:3px solid #0084C5 !important;}#right-post .widget:nth-child(3) h2,#right-post .widget:nth-child(3) h3{border-bottom:3px solid #6CAC00 !important;}#right-post .widget:nth-child(1) h2,#right-post .widget:nth-child(1) h3{border-bottom:3px solid #00C3B7 !important;}#right-post .widget:nth-child(2) h2,#right-post .widget:nth-child(2) h3{border-bottom:3px solid #FF8168 !important;}#right-post .widget:nth-child(3) h2,#right-post .widget:nth-child(3) h3{border-bottom:3px solid #FFBA0F !important;}
.widget-label .widget-content{overflow:hidden;margin:0 0 5px 0;padding:10px 0;}.label-size-1, .label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left}.label-size{display:block;float:left;margin:0 1px 1px 0;color:#eee;}.label-size a,.label-size span{display:inline-block;color:#fff;padding:6px 8px;}.label-size:hover{background:#393939}
.label-count{white-space:nowrap;padding-right:8px;margin-left:-4px;}.label-size{line-height:1.2}#footer-top .label-size{background:#555 !important;}#footer-top .label-size:hover{}#footer-top .label-size a{color:#eee !important;}.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0;}.showpageArea a{color:#555;}.showpageNum a{padding:5px 12px;margin:0 2px 0 0;background:#eee;}.showpageNum a:hover,.showpage:hover{color:#fff !important;}.showpage{margin:0 0 0 0;}.showpage:hover a{color:#fff !important;}.showpageOf,.showpage{padding:5px 12px;margin:0 2px 0 0;background:#eee;}.showpagePoint{color:#fff;padding:5px 12px;margin: 0 2px 0 0;}
Langkah Kedua : Simpan Template....
.gif "Bisnis Online")
