Popular Posts With Thumbnail View

Dalam postingan MWcrew yang sebelumnya telah membahas bagimana cara membuat Artikel terkait dengan mode thumbnail maka pada postingan kali ini MWcrew akan membahas bagaimana cara membuat Artikel populer dengan menggunakan thumbnail juga dan mempunyai efek berputar sekaligus membesar jika di lintasi dengan mouse/kursor (Hover Effect).

Popular posts with thumbnail juga membantu menaikkan page view di blog sobat, karena tampilannya yang menarik juga mempunyai efek hover yang bagus, cara ini sudah saya terapkan di blog saya yang namanya Ailaspark.


Preview :




Caranya tidak sulit alias mudah, tempatkan kode berikut di bawah ]]></b:skin>

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Selesai, jangan lupa disimpan.

Setelah itu anda hanya tinggal membuat widget Entri Populer atau Popular Post seperti yang ada pada gambar dibawah ini.



Lalu aturlah widgetnya seperti pada gambar dibawah ini.




Klik Simpan, lihatlah blog anda maka Popular Post tadi sudah berubah menjadi thumbnail.
Selamat Mencoba....



"MWcrew"
6 Comments
Related Post

Join the Discussion!

septa prasetya
November 20, 2012 5:20 PM | Delete comment

Nice info gan,,
^_^

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan