Cara memodifikasi Label pada blog

Banyak dari kita, yang pada saat membuat blog ingin merasakan bahwa tampilan blog kita tersebut, lebih sempurna atau ingin memodifikasi template, agar saat pengunjung merasa bahwa blog kita sangat sempurna atau keren.

Salah satu bagian dari Template kita yaitu Label atau category pada blog yang fungsinya untuk mempermudah daftar dari blog kita, agar sipengunjung merasa mudah untuk mencari daftar dari artikel yang kita buat,Kali ini admin akan memberikan bagaimana cara untuk memodifikasi template daftar label pada blog kita untuk memberikan suatu tampilan yang lebih dari label yang lain dan terlihat keren, dan bermanfaat oke langsung saja

Langkah 1 memasang widget tabel di blog standart

Ini merupakan langkah biasa memasang daftar label dengan bentuk standart. dengan penyedia tersendiri dari widget pada blog

Login ke Dashboard Blog anda

Pilih menu Tata Letak/Layout ➩Sidebar ➪Tambahkan Gadget ➪ Label

Isi sesuai keinginan anda
Contoh pengisian:

(Wajib pilih label dengan tampilan Cloud) agar pada saat di modifikasi akan terbaca dan terlihat rapi nantinya dan simpan. cara diatas bahwa kita diharuskan menyetel konfigurasi label daftar cloud  pada artikel blog kita. maksud dari cloud adalah label daftar artikel kita akan terlihat datar atau berdekatan dengam daftar postingan lain

Langkah 2 Memodifikasi Tampilan Label Dengan mengedit HTML 
Untuk memodifikasi tampilan label tersebut, anda dapat memilih model dan script pada label/category dibawah ini:

Model 1

Code script

1. .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}

Cara pemasngan

1. Masuk ke Dashboard Blog Anda
2. Pilih menu Template➪ Edit HTML
3. Untuk memudahkan pencarian Ketik CTRL + F, dan cari kode ]]</b:skin> atau </style> dan silahkan copy kode di atas tepat diatas atau sebelum kode </style> atau  ]]</b:skin> simpan dan lihat hasilya

 Model lain

Model 2

Code script

1. .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{border-radius:30px;background:#FA0830;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{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

Model 3

Code script

.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;}

Bagikan Artikel ini