Cara Membuat Popular Post Berputar (Gambar)

Free3allpengetahuanku- Kadang kita memikirkan tentang popular Post itu gambar yang berputar dan menarik agar lebih simple dan tidak berat! Namun, dengan cari ini semoga anda bisa berhasil dalam menjalankan keinginanya hehe... (Sudah test)

1.Login ke blog anda
2.Klik tata letak
4.Klik popular post
5.Klik edit atau pengaturan.
6.Centang ceklist Image Thumbnail dan simpan
Lanjut>>>
7.Klik Template
8.Klik Edit HTML
9.Ingat klik cadangkan atau pulihkan dan klik unduh sebelum anda mewnyesal jika terjadi suartu kegagalan ^_^
10.back to edit html dan klik expand template widget
11.Cari Kode: ]]></B:skin> klik CTRL+F untuk mempercepat pencarian! dan letakkan kode 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);

}

12.Cari Kode: <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> 

Note: Kode yang diberi warna biru "PopularPosts1" tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, Sobat ganti saja popularposts1 dengan popularposrts2.

Ganti dengan code 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>

Dan Klik Simpan template! Selesai!!!!!!!!!