Membuat Artikel Populer dengan Efek Animasi Berputar - Keren

Membuat Artikel Populer (Popular Post) Dengan Efek Berputar-sobat kali ini Mazinu akan membahas tutorial blog membahas artikel populer dengan efek animasi berpuat-putar, memang artikel populer itu penting untuk membuat para pengunjung kita tahu bahwa artikel yang sering di baca oleh para pengunjung di blog kita,mungkin dengan tampilan artikel populer yang masih default atau masih bawaan akan terlihat bosan bukan? dan bagaimana kalau kita rubah widget artikel populernya dengan desain semenarik mungkin yaitu dengan memberi efek animasi berputar.
Seperti ini :

Caranya :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget => Pilih Popular Posts
4. Beri Judul Popular Posts

Langkah selanjutnya Cara memasang popular post dengan efek gambar berputar :
1. Rancangan => Edit HTML
2. Tidak perlu Centang Expand Template Widget
3. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atas kode ]]></b:skin>

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-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;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

 4. Selanjutnya anda cari kode dibawah ini (tidak perlu centang expand widget templates)

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

 5. Simpan Template.

Keterangan :

Jika pada template anda tidak ada PopularPost1 (warna biru), sobat cari PopularPost2, kemudian sobat ganti kode yang warna Hijau dengan Popularpost2. Selamat Mencoba :) ...