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>
Salam Blogger
Widget unik ini akan lebih pas dan cocok dengan template blog metro style.
Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
