Cara Memasang Popular Post Dengan Thumbnail

Popular Post Widget, sesuai namanya widget ini berfungsi untuk menampilkan postingan terlaris dalam suatu blog, yang paling banyak dikunjungi. Banyak sekali blogger yang memasang widget popular post di sidebar blog mereka, baik yang masih original bawaan blogger maupun mereka yang telah memodifikasi tampilan popular post agar tampil lebih keren. Secara standard widget popular post bisa terdiri dari judul posting, rangkuman beserta gambar atau bisa menggunakan judul posting dan gambar atau rangkumannya saja.

Pada kesempatan kali ini, Mas Adhie akan berbagi tutorial yang saya dapat dari Kode Blogger tentang bagaimana cara memodifikasi tampilan popular post dengan thumbnail dan efek CSS yang saya rasa cukup keren jika diterapkan di blogspot Anda.

Screenshootnya bisa dilihat dibawah ini :

Jika Anda mensorot pada thumbnail post, maka akan membesar atau berputar karena thumbnail post tersebut telah dilengkapi javascript dan CSS.

Penasaran ingin mencobanya? Ikuti tutorial bagaimana cara memodifikasi tampilan popular post dengan thumbnail

1. Login ke akun Blogger

2. Pilih Tata Letak > Tambahkan widget popular post pilih/centang pada thumbnail gambar

3. Kemudian silahkan menuju halaman Template > pilih Edit HTML kemudian silahkan di beri centang pada "expand widget template" saya sarnkan untuk membackup template Anda untuk jaga-jaga jika mengalami error.

4. kemudian cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)

5. Copy kode dibawah ini kemudian paste diatas kode ]]></b:skin>

.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);}

6. Kemudian carilah kode Popular Post, dan berikut ini adalah kode lengkapnya :

<b:widget id='PopularPosts1' locked='false' title='Popular Post' 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'><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><div style='clear: both;'/><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>

7. Silahkan ganti kode diatas ini dengan kode berikut :

<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 == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (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' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </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>

8. Klik Simpan kemudian silahkan kunjungi blog Anda untuk melihat hasilnya.