Kumpulan Kode CSS Untuk Merapihkan Label Blog

Kumpulan Kode CSS Untuk Merapihkan Label Blog Biar Keren

Hay sobat blogger pada kesempatan kali  ini saya akan share Kode CSS Untuk Merapihkan Label di blogspot . hampir semua blog memberikan widget Label . Gunanya ya untuk mempermudah melihat Artikel sesuai kategori, dengan widget label / kategori pasti akan mempermudah dalam memilih Artikel yang berkaitan dengan artikel lainya . Nah untuk mempercantik tampilan label agar pengunjung lebih senang tentunya .  kalian tinggal pake saja  kode CSS yang sudah saya kumpulkan nih . Tinggal kalian ganti saja kodenya di Template-Edit HTML Ctrl-F-search dengan kata label-size . kalau sudah gantikan kodenya dngn kode kode berikut ini , pilih salah satu yang kamu suka . Ok

Berikut adalah Kumpulan Kode CSS Untuk Merapihkan Label Blog :

Kode CSS Label 1

/*--- TricksHunt.com Custom Label Cloud --- */
.Label a{
padding-left:10px;
background:#0090D5;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#69625A;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}

Kode CSS Label 2

/* ETIQUETAS PERSONALIZADAS CON CSS */
.Label a{
padding-left:10px;
background:#0090D5; /* Color de fondo */
padding:0 10px;
color:#fff!important; /* Color de la fuente */
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; /* transicion */
float:left;
margin-left:3px;
margin-top:3px;
font-size:13px; /* tama�o de la fuente */
-webkit-border-radius: 4px; /* Bordes redondeados */
-moz-border-radius: 4px; /* Bordes redondeados */
border-radius: 4px; /* Bordes redondeados */
}

.Label a:hover{
background:#69625A; /* Color de fondo al pasar el mouse */
-webkit-border-radius: 8px; /* Bordes redondeados al pasar el mause */
-moz-border-radius: 8px; /* Bordes redondeados al pasar el mause */
border-radius: 8px; /* Bordes redondeados al pasar el mause */
}
/* FIN ETIQUETAS PERSONALIZADAS CON CSS */

Kode CSS Label 3

.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Sekian postingan Kumpulan Kode CSS Untuk Merapihkan Label Blog Biar Keren , pilih saja yang sesuai dengan skin blog kalian yah :D , jika ada yang di tanyakan atau merasa kesulitan boleh nanya di sisni . Thanks .

Tweet