Cara Membuat Widget Label Jadi Berwarna Di Blog

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 hadi berwarna

Cara membuat widget label blog berwarna

1. Login ke blogger.com
2. Pilih Menu Template , Edit HTML  Cari Kode </head>
3. Lalu masukan CSS dibawah ini tepat di atasnya

4. <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>

5. Save template
6. tinggal kalian atur tampilan pada labelnya seperti berikut
7. 
8. Done, semuanya selesai

Cukup sekian dan terimakasih,semoga artikel ini bermanfaat buat sobat semua

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: