Membuat Widget Label menjadi Warna Warni saat di Sentuh

adscblog

Master Blogger tidak henti henti nya membuat berbagai variasi untuk blog,pada waktu yang lalu dunia blogger di hebohkan dengan tampilan Populer Post yang warna warni,bahkan tidak sedikit tampilan Populer Post warna warni ini terpasang di template para blogger,karena selain enak di pandang mata tampilan Populer Post dengan warna warni ini mampu memikat para pengunjunh untuk selalu pokus pada widget tertentu

Bahkan saat ini juga para blogger di hebohkan lagi dengan Label Widget yang juga dengan warna warni,bahkan label widget ini juga tidak sedikit terpasang di blog para blogger,dan unik nya label widget ini beda dari populer post warna warni

Yang dimana Label widget ini akan terlihat warna warni nya ketika mosh komputer menyentuh salah satu label widget,maka dimana mosh menyentuh salah satu label widget maka animasi warna akan terlihat bergerak memenuhi kotak label tersebut

Dan begitu juga ketika mosh komputer di lepaskan dari label tersebut maka warna tersebut akan hilang perlahan lahan dan kotak tersebut akan terlihat warna putih saja,Label widget warna warni dengan animasi ini membuat banyak para blogger jatuh hati untuk memasang nya di template mereka

Widget Label Warna Warni dengan tampilan animasi

Jika sobat blogger tertarik dengan tampilan Widget Label tersebut,sobat bisa mengikuti langkah-langkah pemasangan nya di bawah ini

• Seperti biasa silahkan anda masuk ke blogger
• Setelah itu silahkan anda klik template yang berada di bagian kiri blogger
• Kemudian klik edit html
• Setelah anda berada di bagian edit Html,silahkan anda cari kode </head> untuk memudahkan pencarian nya silahkan anda tekan tombol Ctrl+F secara bersamaan kemudian letakan kode berikut sebelum kode </head> tersebut

<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:&quot;&quot;;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>

• Kemudian Save template dan lihat hasil nya

Nah itulah cara membuat widget label dengan warna warni semoga bermanfaat dan selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 06 Juli and have 0 komentar