Trik Membuat Gambar Berputar pada Widget Popular Posts

Pada postingan terdahulu pernah kita membahas tentang bagaimana Cara Memasang Widget Popular Posts Rainbow. Kali ini kita akan membahas lagi tentang Widget Popular Posts ini, tetapi dengan tampilan yang berbeda, yaitu Trik Membuat Gambar Berputar pada Widget Popular Posts. Widget Popular Posts yang akan kita buat ini nantinya bila gambar disentuh oleh Mause maka gambar tersebut akan berputar. Tidak usah berlama-lama, langsung saja kita ikuti langkahnya.

Trik Membuat Gambar Berputar pada Widget Popular Posts

Tahap Pertama

Login ke blogger
Kemudian pilih menu Tata Letak
Pilih Tambahkan Gadget
Akan ada halaman baru yang terbuka pilih Entri Populer

Selanjutnya centang thumbnail untuk menampilkan gambarnya
Centang juga cuplikan untuk menampilkan cuplikan artikel, jika tidak juga tidak apa-apa karena di sini objek kita hanyalah gambar

Terakhir klik simpan.

Sampai di sini Popular Posts sudah selesai dibuat, tetapi hanya tampilan standar dari blogger. Sedangkan kita ingin menampilkan Popular Posts yang lebih dinamis, yaitu dengan gambar yang bisa berputar bila disentuh Mause. Untuk itu kita lanjutkan lagi pada tahap berikutnya.

Tahap kedua

Kembali ke dashbor blogger
Pilih menu template
Kemudian pilih Edit HTML
Cari kode ]]></b:skin>
Copy kode di bawah ini dan letakkan 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);}

Cari kembali kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
Jika sudah ketemu hapus mulai kode tersebut sampai pada penutupnya </b:widget>
Ganti 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 == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <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"'>  <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/>  <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>

Simpan Template dan lihat hasilnya.

Demikianlah Trik Membuat Gambar Berputar pada Widget Popular Posts, semoga ada manfaatnya dan selamat mencoba.

Trik Membuat Gambar Berputar pada Widget Popular Posts