Cara Membuat Label Keren dan Unik Di Blog - Part II : Salam kawan kali ini saya kembali akan membagikan artikel tentang seputar dunia blogger dan kali ini saya akan membagiak artikel mengenai bagaimana cara membuat label keren di blog dan pastinya akan menambah cantiknya blog kalian untuk para pengunjung yang datang ke blog kalian kawan. Dalam dunia blogger artikel yang original dan template yang responsive itu harus, tapi apakah tidak boleh kita mempercantik blog kita dengan bagus. Nah itu dia fungsinya kita harus lebih banyak belajar lagi tentang seputar dunia blogger untuk kedepannya.
Label itu adalah sebuah fitur yang digunakan untuk mengkategorikan artikel atau postingan suatu blog dimana akan memudahkan pengunjung untuk mencari artikel yang merekan inginkan sesuai dengan kategor pada label blog kalian kawan. Membicarakan tentan blog saya sangat suka sekali mengedit template blog saya, tapi ingat template blog jangan selalu di modifikasi karena akan mengurangi atau juga menurunkan performa blog kalian di mata google nantinya. Kali ini saya juga memberitahukan bagaimana cara memasang label yang keren dan juga akan mempercantik atau memperganteng blog kalian.
Langkah-langkah yang harus kalian lakukan untuk membuat label yang keren dan unik di blog :
- pertama kalian harus login pada blog
- kedua kalian pilih menu tata letak --> tambahkan gadget --> pilih label
- atur sesuai yang kalian inginkan
- diwajibkan pilih label dengan tampilan cloud
- lalu simpan.
Cara Memodifikasi Label Dengan CSS :
- pertama kalian harus login pada blog
- Pertama kalian pilih menu template --> sesuaikan --> lanjutan --> tambahkan CSS
- kedua masukan kode script yang saya siapkan kedalam kotak tambahkan CSS
- Terapkan ke blog, lalu lihat hasilnya pada blog kalian.
Style 1
Kode CSS :
.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;}
Style 2
.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:#08A2FA;border-radius:30px;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:#000000} .label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}
Style 3
.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;}
Untuk mengubah warnanya kalian harus mengetahui dulu kode script warna pada pemrograman dan kalian tinggal menggantinya dengan atau pada script label yang ada di kode CSS di atas.
Demikian postingan saya tentan bagaimana cara mengubah tampilah abel dan Cara Membuat Label Keren dan Unik Di Blog - Part II dan semoga bermanfaat untuk kalian agar kalian bisa terus semangat ngeblog dan juga jangan lelah untuk belajar, belajar dan belajar. terima kasih.
