Cara Membuat Widget Label Jadi Berwarna Di Blog

Cara Membuat Widget Label Jadi Berwarna Di Blog

Cara Agar Widget Label Blog Menjadi Warna Warni

Tutorial Cara Membuat Label Daftar Di Blog Menjadi Berwarna. Kali ini kita akan merubah daftar label menjadi warna - warni ketika di sentuh sama mouse...

Kita hanya merubah tampilan label yaang d setel ke tampilan Daftar, kalo untuk Cloud tampilannya biasa saja..

Untuk merubah tampilannya jadi berwarna, sangat simple kita hanya menambahkan css dan mengatur tampilan pada labelnya...

Langsung saja ke tutorial cara merubah widget label jadi bwerarna...

Cara Membuat Widget Label Blog Menjadi


  • Login ke blogger.com
  • Pilih Menu Template, Edit HTML, Cari Kode </head>
  • Lalu masukan CSS Dibawah ini tepat di atasnya
    • 
<style type='text/css'>
/* CSS label */
#sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
#sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}
</style>
  • Save template
  • Tinggal kalian atur tampilan pada labelnya seperti berikut..

    • Cara Membuat Widget Label Jadi Berwarna Di Blog
  • Done, semuanya selesai..
Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Widget Label Jadi Berwarna Di Blog ini bermanfaat.
16 komentar
  1. Muhammad Aulia M. BidinJuly 30, 2016 at 5:25 AM

    sangat bermanfaat gan tutorial nya.. ijin pake diblog ane :)

    ReplyDelete
    Replies
    1. Mas TamvanJuly 30, 2016 at 6:02 AM

      Wokeh gan Mangga.
      Thank Atas Kunjungan + Komentarnya :)

      Delete
  2. HadifJuly 30, 2016 at 9:09 AM

    thanks gan bermanfaat :)

    ReplyDelete
  3. AnonymousMarch 20, 2017 at 1:29 AM

    jalanya koq cepet amet gimana gan ini

    ReplyDelete
    Replies
    1. Mas TamvanMarch 20, 2017 at 2:06 AM

      Agan tinggal cari css transition seperti ini
      transition:all .2s ease-in-out
      Lalu rubah nilainya dari .2s dengan kecepatan yang agan mau misal 5s atau 4.2s

      Delete
  4. UnknownApril 10, 2017 at 7:39 AM

    kalo buat widget popular post bisa gak gan ?

    ReplyDelete
    Replies
    1. Mas TamvanApril 10, 2017 at 6:10 PM

      Bisa juga gan, tinggal merubah id / class dari cssnya. Sesuain dengan popular post n hilangkan yang tidak perlu :)

      Delete
    2. UnknownApril 11, 2017 at 4:49 AM

      yg gak perlu itu yg mana ya gan :D ?
      gue cuma ganti classnya aja sesuai class popular post tpi hasilnya jadi kotak" gitu dan gk keluar warnanya :)

      help me..

      Delete
    3. Mas TamvanApril 11, 2017 at 5:26 AM

      Ane coba cocokin sama Template nte (bryanmzrt)

      Pasang d atas kode </head>

      <style type="text/css">
      /* Popular Post */
      #sidebar-css .PopularPosts li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
      #sidebar-css .PopularPosts li:hover {background:#fff;color:#cf4d35;}
      #sidebar-css .PopularPosts li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
      #sidebar-css .PopularPosts li:hover:before {width:100%;}
      #sidebar-css .PopularPosts li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
      #sidebar-css .PopularPosts li a:hover {color:#fff;}
      #sidebar-css .PopularPosts li:nth-child(1):before,#sidebar-css .PopularPosts li:nth-child(7):before {background:#ca85ca;}
      #sidebar-css .PopularPosts li:nth-child(2):before,#sidebar-css .PopularPosts li:nth-child(8):before {background:#e54e7e;}
      #sidebar-css .PopularPosts li:nth-child(3):before,#sidebar-css .PopularPosts li:nth-child(9):before {background:#61c436;}
      #sidebar-css .PopularPosts li:nth-child(4):before,#sidebar-css .PopularPosts li:nth-child(10):before {background:#f4b23f;}
      #sidebar-css .PopularPosts li:nth-child(5):before,#sidebar-css .PopularPosts li:nth-child(11):before {background:#46c49c;}
      #sidebar-css .PopularPosts li:nth-child(6):before,#sidebar-css .PopularPosts li:nth-child(12):before {background:#607ec7;}
      </style>

      Delete
    4. UnknownApril 11, 2017 at 6:25 AM

      wah.. mantap thx gan (y)
      work 100% :-d

      Delete
  5. Ini RizkyApril 21, 2017 at 7:56 AM

    gan di ane susah di klik gan tutor dong

    GITUinBLOG(dot)blogspot(com)

    ReplyDelete
  6. UnknownFebruary 4, 2018 at 12:53 AM

    mas, setelah saya pasang kok gak kayak aslinya ya?

    ReplyDelete
    Replies
    1. Mas TamvanFebruary 4, 2018 at 1:24 AM

      g sesuai gimana? / coba hapus css label sebelumnya gan, mungkin bentrok.

      Delete
  7. UnknownFebruary 4, 2018 at 2:48 AM

    gan biar bisa di footer giman a

    ReplyDelete