Popular Post Animasi Gambar Berputar

Banyak animasi yang membuat tampilan popular post blog kelihatan elegant. Pada tips kali ini saya akan memberikan bagaimana cara membuat Animasi Popular Post dengan Gambar Berputar. Fitur blogger ini dapat kita edit dengan memnggunakan kode CSS3  untuk membuatnya sesuai dengan yang kita inginkan, seperti halnya dengan tampilan gamabr berputar.

Untuk membuat popular post dengan animasi gambar berputar, kita menggabungkan antara popular post default bawaan blogger dengan menambahkan kode CSS3 didalamnya. Widget popular post ini tidak memberatkan loading blog, karena tambahan kode berupa CSS3 bukan javascript. Jika sobat blogger tertarik untuk menampilkannya pada blog sobat, silahkan ikuti langkah-langkah berikut ini:

1. Login ke blogger dengan account anda sendiri
2. Pada dasbhoard anda, silahkan pilih Tata Letak.
3. Pilih Add Gadget atau Tambah Gadget.
4. Pilih Popular Post (jika anda belum menambahkannya pada blog anda) seperti gambar di bawah ini

5. Jika sudah, silahkan Save.
Untuk mengedit tampilannya dengan kode CSS3 sekarang sobat beralih pada Edit HTML blog anda. Dengan cara Template => Edit HTML=> Lanjutkan => Centang Expant Template Widget.

6. Cari kode ]]></b:skin> dan letakkan kode berikut dibawahnya

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

7. Kemudian cari kode yang mirip seperti ini:

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

8. Ganti kode di atas dengan kode berikut 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>

9. Jika sudah selesai, silahkan Simpan Template.
Semoga berhasil dan mohon maaf jika ada kesalahan(Jkt/2012)