» » » » » Widget Popular Posts Dengan Efek Spinning Dan Zooming

Widget Popular Posts Dengan Efek Spinning Dan Zooming

Popular Posts Style Grid And Effect SpinningWidget popular posts default blogger memiliki tampilan standar yang masih dapat kita modifikasi lagi dengan CSS3 sehingga lebih aktraktif. Kalau sebelumnya kita telah mencoba menambahkan efek marquee pada widget popular posts, maka kali ini kita akan menambahkan efek spinning dan zooming pada thumbnails widget popular posts.

Efek hover spinning dan zooming pada thumbnail widget popular posts adalah efek animasi gambar berputar dan membesar ketika kita mengarahkan pointer mouse pada thumbnail/gambar widget tersebut. Untuk jelasnya silahkan lihat live demonya dahulu dengan mengklik button berikut:

View Demo
 

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:

Popular Posts Widget

  • 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!

Demikian tutorial menambahkan efek spinning dan zooming pada thumbnails widget popular posts, jika ingin mencoba menambahkan efek marquee pada popular posts silahkan klik link title posts tersebut! Semoga bermanfaat.
0 Komentar untuk "Widget Popular Posts Dengan Efek Spinning Dan Zooming"