Trik Membuat Gambar Berputar pada Widget Popular Posts

Trik Membuat Gambar Berputar pada Widget Popular Posts

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
Trik Membuat Gambar Berputar pada Widget Popular Posts

  • 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
Trik Membuat Gambar Berputar pada Widget Popular Posts

  • 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 == &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>
  • Simpan Template dan lihat hasilnya.
Demikianlah Trik Membuat Gambar Berputar pada Widget Popular Posts, semoga ada manfaatnya dan selamat mencoba.

Artikel terkait:

Bagikan: