Popular Post Efek Snippet Sliding - Seperti halnya widget metro drop down sliding untuk tips blog gaya metro ui style kali ini saya akan memberikan sedikit tips sederhana memodifikasi widget popular post. Mungkin bagi kalian semua sudah tidak asing lagi dengan widget yang satu ini, setiap blog pasti mempunyai widget popular post. Widget unik ini berfungsi untuk menampilkan artikel yang sering di buka atau dibaca oleh pengunjung blog, lebih tepatnya adalah artikel populer blog. Blogger menyediakan widget ini secara default, namun untuk tampilan disetiap blog bisa saja berbeda - beda. Sebenarnya untuk costumisasi widget ini kita hanya memerlukan kode CSS untuk merubah bentuk, warna dan efeknya.
Dibawah ini adalah contoh sederhana untuk kode CSSnya :
.popularposts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 200px;
background-color: #27ae60;color:#fff;
padding: 7px;
border: 1px solid #27ae60;
z-index: 2;
left: 300px;
top: 50%;
height: auto!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.popularposts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.popularposts img{width:50px;height:50px}
.popularposts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 200px;
background-color: #27ae60;color:#fff;
padding: 7px;
border: 1px solid #27ae60;
z-index: 2;
left: 300px;
top: 50%;
height: auto!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.popularposts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.popularposts img{width:50px;height:50px}
.popularposts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}
Kita hanya perlu menambahkan kode CSS ini sebelum kode ]]><b:skin>
Untuk demonya bisa anda lihat pada Responsive Simple Metro Mini template.
Widget unik ini akan lebih pas dan cocok dengan template blog metro style.
Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
Salam Blogger
Like THIS :
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku
Belum ada komentar untuk "Popular Post Efek Snippet Sliding"
Posting Komentar