Membuat Label Penuh Warna di Blog

Membuat Label Penuh Warna di Blog - Mungkin anda pernah melihat blog yang memunyai label yang warna-warni seperti pelangi,apakah anda pengen mencoba menerapkan pada blog anda? Pas sekali pada kesempatan kali ini saya akan mencoba memberikan tutorial bagaimana cara membuat label berwarna seperti pelangi, 


Saya lihat pertama cloud label berwarna ini dari blog the-anarcytha. Untuk penampakan labelnya bisa lihat gambar dibawah ini:
cloudLabel
Tutorialnya silahkan ikuti cara berikut:
1. Masuk Dashboard Blogger
2. Tambahkan Label Baca: Cara Menambah Label Blog ,abaikan jika sudah memasangnya dan beri ceklis di cloud pada display label
3. Langkah selanjutkan simpan kode CSS pada template , template > edit template dan letakkan di atas kode ]]></b:skin> atau </style>
/* cloudlabel pelangi*/
.label-size {
line-height: 1.1;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 5px;
text-transform: uppercase;
}
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {
font-size: 100%;
opacity: 5;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 5px;
text-transform: uppercase;
}
.label-size-1 a {
background: rgba(155, 89, 182,1.0);
border-bottom: 1px solid rgba(142, 68, 173,1.0);
}
.label-size-2 a {
background: rgba(46, 204, 113,1.0);
border-bottom: 1px solid rgba(39, 174, 96,1.0);
}
.label-size-3 a {
background: rgba(52, 152, 219,1.0);
border-bottom: 1px solid rgba(41, 128, 185,1.0);
}
.label-size-4 a {
background: rgba(26, 188, 156,1.0);
border-bottom: 1px solid rgba(22, 160, 133,1.0);
}
.label-size-5 a {
background: rgba(231, 76, 60,1.0);
border-bottom: 1px solid rgba(192, 57, 43,1.0);
}
.label-size a:hover{
background:rgba(225, 225, 225,0.5);
}
4. Simpan Template

Mungkin ada yang bertanya,terus bagaimana cara membuat cloud label seperti blog ini? sebenarnya kalau anda sudah membeli template evomagz dari mas sugeng pasti anda akan dapat melihat kodenya, dan jika anda belum sempat beli saya akan memberikan kode untuk cloud label seperti yang evomag pakai. Untuk cara sama seperti langkah sebelumnya hanya saja kode css di atas ganti dengan kode css berikut:

Tambahan Kode CSS cloudlabel evomagz

/* cloudlabel */
.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:#E73037;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:#333333;}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}
.label-size {line-height:1.2}

Silahkan edit sendiri warna dengan kesukaan anda,untuk warna lain silahkan bisa kunjungi halaman FlatUIColor

Semoga bermanfaat

40 Responses to Membuat Label Penuh Warna di Blog

  1. ini adalah sesuatu yang menarik, terima kasih di atas perkongsian ini yer...

    ReplyDelete
    Replies
    1. iya sesuatu banget ya, terima kasih kembali :)

      Delete
  2. keren nih infonya, tp saya lbh seneng yg simpel aja :D

    ReplyDelete
  3. Replies
    1. silahkan dicoba mumpung mash anget :ng

      Delete
  4. warna warni template blog... nice...

    ReplyDelete
  5. makin berwarna ya mas kalau widget label nya cerah getu ;)

    ReplyDelete
    Replies
    1. bener sekali sis eka,, cerah dan gmna gtu :D

      Delete
  6. wah jadi keliatan rame ya mas..trims buat scriptnya , saya amankan dulu

    ReplyDelete
  7. A lot to learn from your blog, thanks!

    ReplyDelete
  8. wahh keren ya gan..
    label nya jadi warna - warni begitu,, langsung coba aja dehh

    ReplyDelete
  9. ternyata begitu ya caranya saya sempat lihat disuatu blog :D

    ReplyDelete
  10. mas klo template yang mas pake namanya apa saya tertarik mas untuk mencobanya buat blog saya mas

    ReplyDelete
    Replies
    1. desain sendiri mas,, cari aja template 3 kolom :D

      Delete
  11. keren juga yah mas kalau labelnyanya dibuat berwarna warni, makasih sharingnya mas nanti saya coba :)

    ReplyDelete
  12. bagus nih, loadnya lama nggak klo pakek yang ini? :O

    ReplyDelete
    Replies
    1. cepet kok chik,, buat yang suka blognya warna warni :D

      Delete
  13. Wah jadi lebih hidup mas tampilan labelnya...:-bd

    ReplyDelete
    Replies
    1. benar mas,, apalagi punya mas nyzam identik dengan ui color =D

      Delete
  14. kayaknya buat blog anime cocok ya

    ReplyDelete
    Replies
    1. iya benar itu sis,, tinggal edit sesuai selera :)

      Delete
  15. Bisa Praktek nih di blog saya :D Itu Warnanya Bisa Di Ganti Ga gan ?

    ReplyDelete
  16. bisa mas ganti aja kode pada .label-size-1 a {
    background: rgba(155, 89, 182,1.0);
    border-bottom: 1px solid rgba(142, 68, 173,1.0);

    disitu pakai warna rgba untuk warna lain silahkan bisa kunjungi flatuicolors.com

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔