Tampilan label hanya dapat berubah jika di setel ke tampilan Daftar, bukan cloud. Karena, kalo kita menyetel ke tampilan Cloud, maka tampilan Labelnya tidak akan berubah.
Untuk merubah tampilan Widget Label menjadi warna-warni sangatlah mudah. Kita hanya menaruh Kode CSS ke Blog dan mengatur tampilan pada labelnya.
Tanpa basa-basi langsung aja simak Tutorial berikut:
- Login ke Blogger.com
- Pilih Menu Template, lalu klik Edit HTML. Cari Kode </head> (bisa dicari dengan menekan tombol CTRL+F pada keyboard lalu ketik </head> setelah itu tekan tombol Enter)
- Setelah itu, masukkan Kode CSS di bawah ini sebelum kode </head>.
<style type="text/css">
/* CSS label */
#sidebar-wrapper .Label li {
position: relative;
background: #fff;
border-bottom: 1px solid #bbb;
color: #444;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
font-size: 90%;
transition: all .3s ease-out;
}
#sidebar-wrapper .Label li:hover {
background: #fff;
color: #cf4d35;
}
#sidebar-wrapper .Label li:before {
content: "";
position: absolute;
width: 0;
height: 100%;
background: #4fafe9;
transition: all .2s ease-in-out;
}
#sidebar-wrapper .Label li:hover:before {
width: 100%;
}
#sidebar-wrapper .Label li a {
padding: 0 0 0 10px;
display: block;
position: relative;
line-height: 42px;
color: #787878;
text-decoration: none;
transition: all .3s ease-out;
}
#sidebar-wrapper .Label li a:hover {
color: #fff;
}
#sidebar-wrapper .Label li span {
float: right;
height: 42px;
line-height: 42px;
width: 42px;
text-align: center;
display: inline-block;
background: #4fafe9;
color: #FFF;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {
background: #ca85ca;
}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {
background: #e54e7e;
}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {
background: #61c436;
}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {
background: #f4b23f;
}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {
background: #46c49c;
}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {
background: #607ec7;
}
#sidebar-wrapper .label-size {
position: relative;
display: block;
float: left;
margin: 0 4px 4px 0;
font-size: 13px;
transition: all 0.3s;
}
#sidebar-wrapper .label-size a {
background: #fff;
background-image: linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);
display: inline-block;
color: #444;
padding: 5px 8px;
font-weight: 400;
border: 1px solid #e3e3e3;
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
transition: all .3s;
}
#sidebar-wrapper .label-count {
opacity: 0;
visibility: hidden;
font-size: 85%;
display: inline-block;
position: absolute;
top: -10px;
right: -10px;
background: #4fafe9;
color: #fff;
white-space: nowrap;
padding: 0;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 100%;
text-align: center;
z-index: 1;
transition: all .3s;
}
#sidebar-wrapper .label-size:hover .label-count {
opacity: 1;
visibility: visible;
top: -5px;
}
#sidebar-wrapper .label-size a:hover {
color: #444;
background-image: linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);
background-position: 0 0;
}
.Label li {
background: transparent;
float: left;
padding: 5px;
margin: 0;
text-align: left;
width: 45%;
transition: all .3s ease-out;
}
.Label li span {
float: right;
color: #aaa;
margin: 0;
padding: 4px 6px;
text-align: center;
font-size: 13px;
font-weight: 400;
border-radius: 2px;
}
/* CSS label */#sidebar-wrapper .Label li {
position: relative;
background: #fff;
border-bottom: 1px solid #bbb;
color: #444;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
font-size: 90%;
transition: all .3s ease-out;
}
#sidebar-wrapper .Label li:hover {
background: #fff;
color: #cf4d35;
}
#sidebar-wrapper .Label li:before {
content: "";
position: absolute;
width: 0;
height: 100%;
background: #4fafe9;
transition: all .2s ease-in-out;
}
#sidebar-wrapper .Label li:hover:before {
width: 100%;
}
#sidebar-wrapper .Label li a {
padding: 0 0 0 10px;
display: block;
position: relative;
line-height: 42px;
color: #787878;
text-decoration: none;
transition: all .3s ease-out;
}
#sidebar-wrapper .Label li a:hover {
color: #fff;
}
#sidebar-wrapper .Label li span {
float: right;
height: 42px;
line-height: 42px;
width: 42px;
text-align: center;
display: inline-block;
background: #4fafe9;
color: #FFF;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {
background: #ca85ca;
}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {
background: #e54e7e;
}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {
background: #61c436;
}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {
background: #f4b23f;
}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {
background: #46c49c;
}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {
background: #607ec7;
}
#sidebar-wrapper .label-size {
position: relative;
display: block;
float: left;
margin: 0 4px 4px 0;
font-size: 13px;
transition: all 0.3s;
}
#sidebar-wrapper .label-size a {
background: #fff;
background-image: linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);
display: inline-block;
color: #444;
padding: 5px 8px;
font-weight: 400;
border: 1px solid #e3e3e3;
background-repeat: repeat-y;
background-size: 100% 90px;
background-position: 0 -30px;
transition: all .3s;
}
#sidebar-wrapper .label-count {
opacity: 0;
visibility: hidden;
font-size: 85%;
display: inline-block;
position: absolute;
top: -10px;
right: -10px;
background: #4fafe9;
color: #fff;
white-space: nowrap;
padding: 0;
width: 22px;
height: 22px;
line-height: 22px;
border-radius: 100%;
text-align: center;
z-index: 1;
transition: all .3s;
}
#sidebar-wrapper .label-size:hover .label-count {
opacity: 1;
visibility: visible;
top: -5px;
}
#sidebar-wrapper .label-size a:hover {
color: #444;
background-image: linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);
background-position: 0 0;
}
.Label li {
background: transparent;
float: left;
padding: 5px;
margin: 0;
text-align: left;
width: 45%;
transition: all .3s ease-out;
}
.Label li span {
float: right;
color: #aaa;
margin: 0;
padding: 4px 6px;
text-align: center;
font-size: 13px;
font-weight: 400;
border-radius: 2px;
} </style>
- Klik Save Template
- Selanjutnya kalian hapus widget label yang lama, lalu buat baru widget label setelah menaruh kode CSS tadi.
- Done. Selamat Widget Label teman-teman telah menjadi berwarna
Sekian dari artikel Cara Mudah Membuat Widget Label Menjadi Berwarna di Blog. Semoga Bermanfaat. Terimakasih.
Social Plugin