Cara Membuat Label Blogger Dengan Efek Curl

Masih dengan pembahasan yang sama, yaitu tentang mengedit atau mengubah tampilan label di blogger, tapi kali ini label nya berefek keren. Efek melengkung seperti di lipat pada bagian ujung label menjadi kelebihan sendiri untuk label yang satu ini. Seperti biasa, kita hanya perlu menambah kode CSS yang akan membuat efek pada label di blog kita. Tapi jika sudah menerapkan label seperti postingan sebelum nya, kalian harus menghapus kode CSS yang itu dan mengganti nya dengan CSS yang ada di postingan ini.

Seperti itu kiranya tampilan dari label dengan CSS yang akan saya share. Kenapa ada 4 gambar ? karena akan saya share 4 kode CSS yang bisa kalian coba semua nya, dan tentunya gunakan sesuai selera ya.

Step 1 : Buat label baru dengan tampilan cloud. Cara nya, masuk ke Tata Letak kemudian tambahkan widget dan pilih label, pada tampilan pilih cloud.

Step 2 : Masuk ke halaman edit HTML di template. Masukan kode CSS dibawah di atas </b:skin> pilih salah satu ya jangan di masukin semua nya kode dibawah.

Style 1 : Curl Top-Left

.label-size {
 display:inline-block; margin: 0 4px 4px 0; padding:7px;
 font:13px verdana; float:left; background: #FF0000;
 -webkit-transform: translateZ(0); transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
 pointer-events: none; position: absolute;
 content: ''; height: 0; width: 0; bottom: 0; left: 0;
 background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
 box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
 -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
 -webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
 width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Style 2 : Curl Top-Right

.label-size {
 display:inline-block; margin: 0 4px 4px 0; padding:7px;
 font:13px verdana; float:left; background: #FF0000;
 -webkit-transform: translateZ(0); transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
 pointer-events: none; position: absolute;
 content: ''; height: 0; width: 0; top: 0; right: 0;
 background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
 box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
 -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
 -webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
 width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Style 3 : Curl Bottom-Right

.label-size {
 display:inline-block; margin: 0 4px 4px 0; padding:7px;
 font:13px verdana; float:left; background: #FF0000;
 -webkit-transform: translateZ(0); transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
 pointer-events: none; position: absolute;
 content: ''; height: 0; width: 0; bottom: 0; right: 0;
 background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
 box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
 -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
 -webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
 width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Style 4 : Curl Bottom-Left

.label-size {
 display:inline-block; margin: 0 4px 4px 0; padding:7px;
 font:13px verdana; float:left; background: #FF0000;
 -webkit-transform: translateZ(0); transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
 pointer-events: none; position: absolute;
 content: ''; height: 0; width: 0; bottom: 0; left: 0;
 background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
 box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
 -webkit-transition-duration: 0.3s; transition-duration: 0.3s;
 -webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
 width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Terakhir kalian tinggal save template kemudian lihat hasil nya.