Membuat Widget Popular Post Efek Snippet Sliding

Popular Post Efek Snippet Sliding - Seperti halnya widget metro drop down sliding untuk blog gaya metro 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%}


Kita hanya perlu menambahkan kode CSS ini sebelum kode ]]>

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

 

cocok banget nih mas, untuk

cocok banget nih mas, untuk flat template

 

Siip

sesuai konsep flat metro ui mas

 

bagus tuh

wah bagus tuh gan. Jadi lebih menarik blog kita