Sunday, July 28, 2013

Widget Popular Posts Dengan Efek Spinning Dan Zooming



Popular Posts Style Grid And Effect Spinning









 
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!

0 comments:

Post a Comment