Kumpulan Label Unik, Sederhana dan Keren + Cara Memasang di blog

Kumpulan Label Unik, Sederhana dan Keren + Cara Memasang di Blog - Kali ini saya bukan hanya berbagi satu teknik merubah label menjadi unik dan keren, melaikan saya membagikan 5 script css yang bisa anda coba pada website/blog Anda. Anda ingin memasang ataupun membuat label website/blog Anda terlihat berbeda dengan blog lainnya, silakan ikuti langkah-langkah dibawah ini.

Langkah-langkah Memasang dan Membuat Label Blog

1. Login ke Blogger.com.
2. Silakan masuk ke menu Edit HTML,  Dashboard > Template > Edit HTML.
3. Kemudian cari kode dan dengan menggunakan Ctl + F.
4. Cari script css  dengan nama .label kemudian hapus dan ganti dengan script css dibawah ini.

/*CSS Label skipzen.org*/
.Label a{
padding-left: 5px;
padding-right: 31.5px;
color: #fff!important;
height: 32px;
background: #4399cd;
margin-right: 2px;
line-height: 32px;
text-decoration: none;
border: none !important;
-webkit-transition: all .3s ease-in-out !important;
float: left;
margin-top: 2px;
font-size: 13px;
text-align: left; }
.Label a:hover{
color:#fff !important;
background: #54aee3; }
.Label a:after{
content: "";
position: absolute;
width: 0px;
height: 0px;
border-width: 16.5px;
border-style: solid;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

/*CSS Label Skipzen.org*/
.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 { background:#4169E1; display:block; float:left; margin:0 3px 3px 0; color:#ffffff; font-size:11px; text-transform:uppercase; 
.label-size a,.label-size span{ display:inline-block; color:#ffffff !important; padding:6px 8px; font-weight:bold; }
.label-size:hover { background:#333333; }
.label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }
.label-size { line-height:1.2 }

/*CSS Label Skipzen.org*/
.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;}

/*CSS Label Skipzen.org*/
.Label a{ padding-left:20px; background:#00FFFF; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }

/*CSS Label Skipzen.org*/
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:12px; color:#666; }
.label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }

5. Save kembali template Anda dan lihat hasilnya, akan tampak seperti gambar diatas .

Sekian tutorial dari saya mengenai kumpulan desain label unik untuk blog, tunggu tutorial label lainnya. Catatan: Anda diperbolehkan mengcopy-paste dengan mencantumkan link sumber.