Cara terbaru membuat label blog simple elegan fast loading

 Halo kawan kali ini masih tentang cara memodifikasi tampilan blog menggunakan hosting gratisan yakni blogspot,dan pada kesempatan ini admin bagikan cara membuat Label yang berada di sidebar menjadi elegan serta tidak membebani loading halaman.

 Untuk membuat mudah ,tinggal kita pasang atau menambah Script di CSS (Cassading Steel Shet).Dan jika sobat ingin membuatnya ada 2 Contoh label yang menurut admin  sangat simpel serta ringan.

 Dan tentunya akan memudahkan pengunjung menemukan artikel berdasar label tersebut,berikut ikuti langkah di bawah ini.
  1. Buka Akun blogger sobart,setelah itu buka Tema dan Edit (untuk mempercepat tekan CTRL + F.
  2. Setelah itu cari kode ]]></b:skin>  atau </style>.
  3. Setelah ketemu copy kode di bawah ini ,dan paste di atas kode di atas.
Berikut kodenya

#sidebar-wrapper .Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#ef4824;}
#sidebar-wrapper .Label li:before {content:&quot;\f105&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
#sidebar-wrapper .Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#ef4824;}
#sidebar-wrapper .Label li a {color:#666;font-size:95%;transition:all .3s ease-out;}
#sidebar-wrapper .Label li a:hover {color:#ef4824;}
#sidebar-wrapper .Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-size:12px;transition:initial;border-radius:2px;}
#sidebar-wrapper .Label li span:hover{background-color:#ef4824;color:#fff}
#sidebar-wrapper .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;}
#sidebar-wrapper .label-size:hover{background:#ef4824;border-color:#b69c6c;}
#sidebar-wrapper .label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
#sidebar-wrapper .label-size a:hover {color:#fff;}
#sidebar-wrapper .label-size a:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
#sidebar-wrapper .label-size a:hover:before {content:&quot;\f02b&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
 
Maka jika hasilnya benar ,maka tampilannya akan seperti pada gambar di bawah ini.




Dan berikutnya atau label kedua yang tentunya juga elegan ringan serta mudah di gunakan ,sobat bisa coba pasang kode di bawah ini

 .cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: &#39;Open Sans&#39;,&quot;Segoe UI&quot;,Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.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: #ff6bb5;
} 
Dan akan tampak seperti pada gambar di bawah ini.
Demikian kawan untuk dua lebel keren elegan ringan yang sudah admin bagikan,semoga bermanfaat dan silahkan selamat mencoba.semoga bermanfaat.

Baca juga artikel lainnya