Membuat Popular post gambar berputar

Santri Balaghy, berbagi info tentang Membuat Popular post gambar berputar untuk menjadikan blog lebih menarik dengan animasi gambar berputar. Dalam pembuatan Popular post model ini, sahabat akan menggabungkan antara popular post default blogger dengan menambahkan kode CSS3 di dalamnya. Nah, kalau sahabat tertarik dengan trik blogger yang satu ini, nih dia tipsnya:

Membuat Popular post gambar berputar

1. Silahkan sahabat login ke akun blog sahabat.

2. Selanjutnya tambahkan widget popular postnya. Caranya klik menu layout atau Tata letak.

3. Klik Add widget, kemudian cari dan pilih widget Popular post.

4. Ganti atau biarkan saja judul widgetnya (default: Popular post)

5. Hilangkan centang pada snipset atau cuplikan lalu simpan.

6. Setelah pengaturan diatas selesai, lanjut ke pengaturan html template.

7. Pilih menu Template, kemudian klik edit html.

8. Cari kode ]]></b:skin> (untuk memudahkan tekan f3 atau ctrl f)

9. Setelah ketemu kode di atas, isikan kode dibawah ini tepat 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);
}

10. Selanjutnya cari kode seperti ini

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

Unuk memudahkan pencarian tekan f3 dak ketikkan huruf yang berwarna merah.

11. Setelah ketemu kodenya, ganti semua kode dalam elemen di atas dengan kode di bawah 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>

12. Langkah terakhir adalah Simpan template dan lihat hasilnya.

Sekian Tips trik cara Membuat Popular post gambar berputar oleh Santri Balaghy. Jika trik ini memberikan info yang sahabat cari, jangan lupa like share ya. 
Kami ucapkan Selamat mencoba!

Semoga bermanfaat,

Salam Sahabat Balaghy!

Sumber: http://situseo.blogspot.com/2011/12/membuat-popular-post-animasi-dengan.html