Tutorial Membuat Popular Post Dengan Gambar Berputar

Dengan adanya animasi gambar berputar pada widget popular post kita,maka blog sobat akan terlihat leibh hidup dan keren.

Jika sobat tertarik untuk membut Popular Post Dengan Gambar Berputar,sobat bisa mengikuti tahapan pembuatannya.

◘ Tahap Pertama : 

♦ Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post

♦ Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
♦ Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
♦ Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
♦ Save
◘ Tahap Kedua :
♦ Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
♦  Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya.

.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); } 

♦ Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
♦ Dan ganti semua kode tersebut dengan kode 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> 
♦ Save template sobat.