Merubah Popular Post Menjadi Animasi

Hai sobat blogger, hari ini saya ingin berbagi ilmu kepada kalian. Cara ini merupakan cara mengedit Entri Populer/Popular Post kamu. Bagi kamu yang suka dengan tampilan dinamis silakan ikuti langkah-langkah berikut ini :

1. Buka blog kamu dan klik Template > Cadangkan/Pulihkan > Unduh template lengkap. Setelah download kemudian tutup
2. Klik "Edit HTML" dan lanjutkan (jangan lupa centang Expand Template Widget)
3. Cari kode ]]></b:skin> (untuk memudahkan mencari kode tersebut tekan tombol Ctrl+F)
4. Kemudian Copy kode dibawah ini dan Paste di atas kode ]]></b:skin>
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:0px;} .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);}
5. Kemudian cari kode popular post1
6. Hapus kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> sampai kode </b:widget> (dari atas sampai bawah)
7. Lalu ganti 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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (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.prismestate.com/images/noimages.png'/> </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>
8. Kemudian klik Pratinjau kalau sudah beres silakan klik Simpan Template