Sebelumnya saya pernah mengetengahkan
cara menambahkan widget popular posts pada blog, widget bawaan blogger tersebut merupakan
widget popular posts berdasarkan page view yang tampilannya standart, pada kesempatan kali ini insyaAllah saya ingin berbagi
cara memodifikasi widget popular posts dengan
menambahkan efek hover border dan background color.
Contohnya seperti screen shoot disamping atau silahkan lihat dulu live demo dengan mengklik button berikut:
View Demo
Tertarik untuk mencobanya? Silahkan Ikuti langkah-langkah berikut:
1. Setelah login ke akun anda pada bagian tata letak>> Tambah gadget>> Tambahkan popular posts bawaan blogger
dan konfigurasikan widget dengan tidak mencenteng kotak kecil thumbnail
dan snippet. Kemudian simpan. Jika belum tahu cara menambahkan widget popular posts bawaan blogger, silahkan lihat tutorialnya disini
2. Kemudian masuk pada bagian template>> edit HTML >> Cari kode ]]></b:skin>
3. Salin dan tempelkan kode CSS berikut diatas kode ]]></b:skin>
Kode untuk efek hover border bottom color:
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5MD5f213OKVM1OUDUc25ohKr6lJJJ69Kx8WzyswdEZICBQiQJfBf_idGH5XgJCv2z4cUr4EcYZVjz9E-ZBqPLw1v_dp1vndNBX9YEeK6-tyJ-Vxru2hNufjpQdTGZ0rpndp0QEN8fuLg/s1600/helperblogger-list-style-icon.png) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:8px 5px 7px 22px !important;
border-bottom: 2px dotted #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 2px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Kode untuk efek hover border rounded color
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/ SmodosCuJCI/AAAAAAAABh4/ZSXbVW9Qpa8/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Kode untuk efek hover border rounded dan background color
Seperti kode diatas, hanya anda tambahkan saja pada kode berikut kode background color seperti berikut:
.popular-posts ul li:hover { background: #CCE9FD;border:1px solid #6BB5FF; }
Perhatikan
kode berwarna biru diatas adalah kode warna yang digunakan untuk hover
border dan backgroundnya, anda bisa mengganti warnanya sesuai keinginan
anda, untuk referensi kode warna bisa lihat tool kode warna disini
Kemudian Save
Publish by : http://www.tipstrikblogging.com
