Widget Popular Posts Dengan Efek Spinning Dan Zooming

  Nah jika tertarik untuk mencoba menambahkan widget popular posts dengan efek hover spinning dan zooming pada blog anda, silahkan ikuti tahapan instalansinya:
Tahapan Pertama

• Setelah login ke akun anda, pada dasbor pilih tata letak >> tambahkan gadget popular posts seperti image berikut:

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya “Popular Posts”. Anda bisa menggantinya sesuai keinginan.
• Pada bagian konfigurasi widget popular posts, anda ceklist pada kotak kecil thumbnail, dan untuk snippet tidak perlu.
• Pilih jumlah popular posts yang ingin ditampilkan
• Save atau simpan

Tahapan Kedua:

Menambahkan popular posts dengan efek hover spinning dan zooming atau animasi gambar berputar dan membesar

• Masuk pada menu Template >> Edit HTML (Tidak perlu menceklist Expand Widget Template)
• Kemudian cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

.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'/>

• Ganti semua kode tadi dengan kode berikut:

<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 anda, dan lihat hasilnya!