-->

Modifikasi Label Blogger Keren (3 Style)

Modifikasi Label Blogger Keren (3 Style) - Assalamu'alaikum sobat blogger? lama tidak posting tentang blog, dan kini saya akan membahas tentang Modifikasi Label Blogger Keren. Label adalah sebuah fitur gadget dari blogger yang menampilkan tag atau kategori yang ada di blog kita. Lebih bagusnya jika kita memodifikasi widget label tersebut menjadi lebih indah dan menarik. Disini saya akan membagikan tiga macam tampilan label blogger, Sobat bisa pilih sesuai keinginan sobat!

Modifikasi Label Blogger
Modifikasi Label Blogger

Modifikasi Label Blogger Keren (3 Style) :

1. Pertama-tama, Login ke Account Blogger sobat.
2. Jika sobat belum menambahkan widget label, silahkan klik LayoutAdd GadgetLabels, kemudian pilih yang Cloud, lalu Save.


3. Sekarang, masuk ke TemplateEdit HTML.
4. Copy Kode CSS dibawah ini tepat diatas kode ]]></b:skin>.
  • KODE CSS
Style 1
/* -- Label Modification by Tutorial Blogz -- */
.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}
Style 2
/* -- Label Modification by Tutorial Blogz -- */
.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;}
Style 3
/* -- Label Modification by Tutorial Blogz -- */
.label-size a{padding-left:10px;padding:0 10px;color:#fff!important;height:28px;line-height:26px;text-decoration:none;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background:#B8B8B8;border:0;border-radius:3px;color:#fff;t:30pxt:30px;float:left;margin-left:3px;margin-top:3px;font-size:14px;font-family:Arial,sans-serif;}
.label-size a:hover{background:#9B9B9B;font-weight: bold; font-variant: small-caps;}
.label-size span{float:right;font-size:9px;margin:0 0 4px;}
5. Setelah itu, klik Save Template. dan lihat hasilnya.

Sangat mudah bukan untuk Modifikasi Label Blogger?
Nah, dengan cara ini maka kita telah mempercantik tampilan label blog kita..

Semoga bermanfaat!

14 Responses to "Modifikasi Label Blogger Keren (3 Style)"

  1. wah bener-bener keren gan labelnya, mau coba di blog saya nich thanks sharenya

    ReplyDelete
  2. wih keren juga nih.. tapi lebih keren yang tag diblog ini^^

    ReplyDelete
  3. visit back gan :)
    http://saidblogmaster.blogspot.com/

    ReplyDelete
  4. Bisa dicoba nih mas :D

    Jangan lupa mampir balik :
    http://firman-ardy.blogspot.com/

    ReplyDelete
  5. Mantep Gan, di tunggu kunjungan baliknya gan di Jasa pembuatan Website Murah.

    thanks gan

    ReplyDelete
  6. wkwkwkwk.. ajjiiieebb.. boleh dicoba nehh. :D

    ReplyDelete
  7. Keren juga yaaa... Boleh di coba ni Gan

    - Blog zeep -

    ReplyDelete
  8. mantab gan....berguna buat ane yg baru

    ReplyDelete
  9. kereen .. nice info gan :)
    jangan lupa jga kunjungi dan follow blog ane ya gan :) www.animeworldsubs.blogspot.com

    ReplyDelete
  10. mantapp .. nice info gan :)

    ReplyDelete
  11. Makasih info nya.. Bemanfaat !

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel