kalongganteng.com - Kali ini masih membahas tentang Tips Blogger yaitu Cara membuat label/kategori blog warna-warni yang keren. Sebelumnya juga saya telah share tentang Cara Memuat Efek Loading Page Blogger Dengan Javascript Jam dan Cara Buat Postingan Terbaru Berdasarkan Kategori/Label Blog. Cara ini masih menerapkan CSS agar label/kategori Blogger menjadi warna-warni dan tampak cantik. Hal ini tentu akan membuat penggunjung blog sobat betah dengan tampilan blog yang indah. Setiap label akan memiliki warna background berbeda dan dapat sobat rubah dengan mengedit code CSS-nya.

Jika sobat berhasil membuatnya nantinya akan tampil seperti screenshot berikut.

Bagaimana keren bukan? untuk dapat membuatnya silahkan ikuti langkah-langkah berikut.

1. Pertama masuk dulu ke Dasboard Blogger Sobat

2. Pilih Template => edit HTML

3. Silahkan copy-paste CSS berikut dan letakkan tepat diatas </b:skin> atau </style> kalau saya coba yang diatas </style> (gunakan Ctrl + F untuk memudahka pencarian):

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:300;
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:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}

CSS di atas hanya digunakan untuk blog yang memiliki sedikit label , jika label blog sobat memiliki banyak label maka gunakan CSS berikut ini:

.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #FF6BFF;
}

5. Simpan perubahan template Sobat.

6. Kembali lagi ke Dashboard Blogger.

7. Klik Layout/Teta Letak > Add a Gadget > pilih Labels

8. Langkah terakhir edit widget Label sehingga sama dengan berikut ini.

9. Simpal Label dan coba lihat tampilan label pada blog sobat sudah berubah seperti screenshot diatas belum. jika belum cek apakah benar CSS yang saya berikan berada tepat diatas </b:skin> atau </style>.