Membuat Popular Post Dengan Efek Image Berputar

Halo sob...
Ketemu lagi di blog sederhana ini...

Setelah kemaren bingung kustomisasi blog akhirnya saya cukup puas setelah memperbaiki widget popular post saya. Cara ini sendiri saya pelajari dari blog Myhafiezers. Nah, sekalian aja saya mau sharing gimana cara agar tampilan popular post bisa melakukan efek berputar saat kita sorot.

Postingan ini cocok buat temen-temen yang lagi giat giatnya memperbaiki / membuat blog baru. Ok daripada panjang lebar ntar malah nyasar (hehehehe... ) mendingan kita langsung aja sob praktekin.

1. Pastikan login dulu ke blogger sob, jangan lupa...

2. Pilih Tata Letak - Tambahkan Gadget - Entri Populer

3. Nah, silahkan temen-temen pilih mau berapa jumlah popular post yang ingin ditampilkan setelah itu klik Simpan.

4. Selanjutnya, kita masuk ke Template - Edit HTML.

5.  Cari kode ]]></b:skin> dan kemudian letakkan kode berikut ini diatas nya :

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

6. Kemudian cari kode berikut :

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

7. Dan ganti kode tersebut 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 == &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>

8. Simpan Template.

Selesai sob. Gimana ?? Tampilan popular post kita pun akan menjadi lebih menarik.

Terima kasih atas kunjungannya sob. Happy blogging...