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

terima kasih selamat mencoba ya,..semoga berhasil















3 Responses to "Cara Membuat Label Blog Keren berwarna "

  1. gila aja skrip nya di suruh ketik ulang gara-gara gx boleh copy paste

    ReplyDelete
  2. gila aja skrip nya di suruh ketik ulang gara-gara gx boleh copy paste

    ReplyDelete
  3. makasih gan infonya, salam hangat pecinta blogger

    ReplyDelete

Recent

Comment

Menu