Membuat Popular Post Dengan Gambar Berputar

SiFadly - Postingan kali ini membahas tentang membuat popular post dengan gambar berputar. Popular post dengan gambar berputar bisa menjadikan tampilan blog menjadi lebih menarik dan bisa membuat blog menjadi lebih profesional. 

tidak memberatkan blog anda

Penggunaan popular post dengan gambar berputar tidak memberatkan blog Anda, karena ini hanya merubah tampilannya saja menggunakan CSS3. Jadi tidak perlu khawatir dengan loading blog Anda.

DEMO

Langsung saja saya mulai tutorialnya dan ikuti langkah-langkah ini dengan baik dan jangan dilewati satupun.

Langkah pertama:

• Masuk akun Blogger - Tata Letak - Add Gadget dan pilih Popular Post.

• 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 diceklist.

• Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan (jumlah maksimal 9).

• Save

Langkah kedua:

• Masuk menu Design/Template - 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 atas kode  ]]></b:skin>

/*-- (Popular post gambar berputar) --*/
.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.7) rotate(360deg);
-webkit-transform: scale(1.7) rotate(360deg);
-o-transform: scale(1.7) rotate(360deg);
-ms-transform: scale(1.6) rotate(360deg);
transform: scale(1.7) rotate(360deg);
}

Tambahan: scale dan rotate bisa Anda ganti sesuai keinginan:

scale = Besar gambar ketika disentuh kursor.

rotate = Perputaran gambar saat disentuh kursor. Jika ingin berputar kearah kiri Anda bisa tambahkan minus menjadi (-360deg)

• Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> (Gadjet yang baru Anda buat tadi)

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

Jika Anda ingin mencari tutorial dan tips blog lainnya tinggal cari saja di kotak pencarian yang ada di blog ini.