Cara Membuat Popular Post Dengan Gambar Berputar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara Membuat Popular Post Dengan Gambar Berputar - Pada kesempatan ini, saya akan menuliskan tips Cara Membuat Popular Post Dengan Gambar Berputar. Yaps, widget ini berfungsi untuk menunjukan postingan populer di blog kita. Namun tampilannya sangat menarik sekali, yaitu dengan gambar dan berputar saat hover atau disentuh mouse.

Berikut demonya

Tampilan Widget

Saat disentuh Mouse

Kemudian, berikut Cara Membuat Popular Post Dengan Gambar Berputar
» Tahap Pertama

• Login Blogger Sobat.
• Masuk ke bagian Tata Letak.
• Tambah Gadget.
• Pilih Gadget "Popular Post".
• Kemudian beri judul sesui dengan keinginan.
• Pilih jumlah post sesuai dengan keinginan.
• Centang Ceklist "Image Thumbnail".
• Klik Save.

» Tahap Kedua

1. Masih di blogger, masuk ke menu "Template", lalu klik "Edit HTML", klik saja "Lanjutkan", jangan lupa centang "Expand Template Widget".
2. Cari kode ]]></b:skin> (gunakan ctrl+f untuk memudahkan pencarian). Kemudian letakkan kode CSS berikut tepat 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);
}

3. Masih di edit HTML.Cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> kemudian ganti kode tersebut dengan kode berikut.
Note: Kode yang diberi warna biru "PopularPosts1" tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, Sobat ganti saja popularposts1 dengan popularposrts2.

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

4. Yang terakhir, Simpan "Template".

Widget Popular Post dengan gambar berputar sudah dapat digunakan di blog sobat.
Oke, jika Sobat mengalami kesulitan dalam memahami langkah-langkah diatas, sobat dapat tanyakan kepada saya di kotak komentar. Semoga bermanfaat dan Terima Kasih.