Cara Membuat Label Blog Keren berwarna

Bagaimana membuat tampilan blog lebih menarik? ya salah satunya dengan merubah tampilan label menjadi keren.Langsung saja kita mulai tutorialnya.
Sebelum kita merubah tampilan labelnya ada hal yang harus dilakukan;

1. pastikan kamu telah memberi nama label di tiap entri postingan ,kalau sudah terlanjur membuat banyak entri yang sudah dipublikasikan dan belum di beri nama label caranya sebagai berikut;

masuk ke dashboard blog--->>pos-->ceklis entri(pilih sesuai kategori labelnya)--->>klik ikon label (disebelah kiri publikasikan)--->pilih label baru --->>ketikan nama label yang diinginkan --->>publikasikan

2.Pastikan juga kamu telah memasang widget/gadget "label"
masuk ke tata letak/lay out --->>pilih tambah gadget--->>pilih label 'dengan klik tanda''+''--->>simpan

Jangan lupa ''simpan setelan--->>lihat blog dan perhatikan hasilnya

dan seperti itulah tampilan standar bawaan blogger,ya kalau menurut kamu sudah bagus tidak usah di modifikasi lagi.Tapi bagi yang belum puas masih bisa merubah tampilannya,saya akan kasih tutorialnya.

sebelum lanjut ke tahap berikutnya kita ubah dahulu pengaturan labelnya:
pada tata letak/lay out--->>klik edit html "label"--->>pada menu 'tampilkan'--pilih "cloud"--->simpan

Selanjutnya pilih salah satu script kode di bawah ini lalu copy dan pastekan di tamplate html:
caranya ke menu tamplate--->> edit html --->> paste script tadi di atas kode ]]></b:skin>

1.Style label ke 1

copy script berikut lalu kembali ke tamplate--->edit html--> paste di atas-->kode ]]></b:skin>

.label-size a{padding-left:10px;background:#0090d5;padding:0 10px;color:#fff!important;height:28px;line-height:26px;text-decoration:none;border:none!important;-webkit-transition:all .3s ease-in-out!important;t:30pxt:30px;float:left;margin-left:3px;margin-top:3px;font-size:14px;font-family:Arial,sans-serif}
.label-size a:hover{background:#555;box-shadow:1px 1px 2px 2px rgba(0,0,0,0.5);-o-transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;-moz-transform:scale(1.1);-o-transform:scale(1.1);-webkit-transform:scale(1.1);transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;-webkit-border-radius:1px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}

2.Style label ke 2

copy script berikut lalu kembali ke tamplate--->edit html--> paste di atas--> kode]]></b:skin>

.cloud-label-widget-content {text-align:center;font-weight: bold;padding: 4px 0}
.cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
.cloud-label-widget-content span a {padding:3px 4px;color:#fff}
.label-size {margin:3px}
.label-size span {background:#E95D0C;padding:3px 4px;color:#fff}
.label-size-1 a {background:#0090d5;font-size:13px;}
.label-size-2 a {background:#E20000;font-size:13px;}
.label-size-3 a {background:#00CEAC;font-size:13px;}
.label-size-4 a {background:#CEEA00;font-size:13px;}
.label-size-5 a {background:#EA9C00;font-size:13px;}
.cloud-label-widget-content span a:hover {background:#555;}

3.Style label ke 3

copy script berikut lalu kembali ke tamplate--->edit html--> paste di atas-->kode ]]></b:skin>

.Label a{ background:#00FFFF; padding:0 20px; color:#000!important; padding-left:20px; border-radius:90px; -moz-border-radius:90px; 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; }