0 Cara Agar Popular Post Dengan Gambar Berputar

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.

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> 

Komentar →