Membuat Popular Post Animasi Dengan Gambar Berputar

Situseo Blog : Membuat animasi popular post dengan gambar berputar, fitur baru popular post blogger yang menampilkan beberapa post yang paling populer dapat kita edit lagi dengan menggunakan CSS3, sehingga tampilannya lebih hidup dengan adanya tambahan gambar yang bergerak berputar bila kita arahkan mouse.

Untuk membuat popular post dengan animasi gambar berputar, kita menggabungkan antara popular post default bawaan blogger dengan menambahkan kode CSS3 didalamnya. Widget popular post ini tidak memberatkan loading blog, karena tambahan kode berupa CSS3 bukan javascript, sebagai ilustrasi tampilan popular post, sepeti gambar dibawah ini :

Demo Popular Post Berputar

Jika tertarik untuk Membuat Animasi Popular Post Dengan Gambar Berputar, kalian bisa mengikuti tahapan cara pembuatannya.

Tahap Pertama : Cara Membuat Animasi Popular Post dengan Gambar Berputar

• Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar dibawah ini :

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
• Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
• Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
• Save

Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar

• Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
• Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya

.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'/>
• Dan ganti semua kode tersebut dengan kode 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>

• Save template kalian

Membuat Animasi Popular Post Dengan Gambar Berputar kode yang diberi warna merah popularposts1 tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, kalian ganti saja popularposts1 dengan popularposrts2. Selamat mencoba,

Semoga bermanfaat,