Membuat Label Keren Animasi di Widget Blog

Label Keren Animasi yang terpasang di widget blog - Banyak sekali para blogger memodifikasi template blog yang mereka miliki,alasan nya yaitu untuk membuat para pengujung blog semakin betah berkunjung ke blog nya

Tampilan template blog yang menarik ternyata mempunyai daya tarik tersendiri terhadap para pengujung apalagi dengan blog yang kaya akan artikel sehingga para pengujung blog semakin betah untuk mencari informasi di dalam blog yaitu dengan mencari artikel yang mereka cari

Mungkin kebanyakan orang,mencari sesuatu artikel yang mereka butuhkan yaitu melalui Label yang berada di bagian kiri atau kanan blog,dengan mencari artikel yang mereka butuh melalui label mungkin mempercepat pencarian nya

Dan tentu nya dengan tampilan label yang berada di bagian widget tersebut dengan sedemikian rupa maka jangan aneh mereka akan terus mencari artikel yang di inginkan nya melalui label yang berada di bagian Sidebar blog,mungkin saja semakin bagus tampilan label maka mereka akan terus mencari Informasi melalui label tersebut dan terus mengklik nya

Cara Modifikasi Label Blog menjadi Keren dan menarik

Jadi untuk anda yang suka merias label blog yang berada di bagian Sidebar,disini saya akan berbagi kode tersebut,keunikan dari label tersebut,ketika kursor menyentuh salah satu halaman label maka akan ada Warna background yang maju seperti animasi ke sebelah kanan,dan ketika di lepas lagi maka background tersebut akan maju kembali ke semula,untuk contoh nya bisa anda lihat di bagian gambar atas

Dan untuk pemasangan Label tersebut bisa anda ikuti langkah-langkah nya di bawah ini

• Masuk ke Bagian Dashboard
• Setelah itu silahkan klik template yang berada di bagian kiri Dashboard
• Kemudian silahkan klik Edit Html
• Setelah berada di peng editan silahkan anda cari kode </head> kemudian silahkan anda letakan kode berikut sebelum kode </head> Tersebut,untuk memduahkan pencarian anda,silahkan anda tekan tombol Ctrl+F secara bersamaan kemudian letakan kode berikut

<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 silahkan Save Template dan lihat hasil nya

Nah itulah Cara memodifikasi label pada bagian Sidebar Blog agar semakin menarik,semoga artikel nya bisa membantu sobat blogger
Catatan : Untuk menyesuaikan warna Background nya sesuai yang anda ingin kan silahkan anda ganti di bagian kode background nya

ads

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Newer Post

Next

Older Post

Posted by Dede Ubed, Published at 04 September and have 0 komentar