cara memasang populer Post thumbnail

saya ingin membuat widget tersebut agar cocok dipasang pada blog yang mempunyai konten game. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik,

berikut ini cara membuatnya :

masuk atau login terlebih dahulu ke Blogger dengan akun Anda masing-masing.
(untuk versi lama blog) Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
untuk versi baru langsung saja masuk masuk ke template >> klik Edit HTML tanpa harus centang Expand Widget Templates.
Lalu masukkan kode berikut ini diatas ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none} .PopularPosts ul{padding:2px 0} .PopularPosts .item-thumbnail img{width:100px;height:110px;padding:3px;margin:0} .PopularPosts .item-content{position:relative;float:left;margin:0} .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:100px} .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)} .PopularPosts .item-thumbnail{float:left;margin:3px 1px 0px 0px;border:1px solid #ccc;overflow: hidden} .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Kode warna hijau diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
Setelah muncul halaman Popular Post, setting popular posnya :

title : sesuaia keinginan sobat

most viewed : jadi all time

show : untuk satu ini harus image thumbnail (agar tampil gallerinya )

Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari 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"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <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"'>  <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/>  <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>

ganti kodenya dengan dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Most Product View' 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"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <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"'>  <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> <div style='clear: both;'/> <b:else/>  <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>

catatan :

untuk mempemudahnya mencarinya jangan dicari semua kode tapi cari sedikit koding saja misal <b:widget id='PopularPosts1' baru kalian cari kode penutupnya dan ganti

gunakan ctrl+f untuk mencarinya

setalah itu simpen deh

jika anda menggunakan tempalte yang editan atau yang seo udah diedit atau masih belum berubah menjadi galeri berikut tipsnya

kalian cari .PopularPosts
kemudian kalian cari satu paket dengan popularpost atau akhir dari koding diatas
setelah ketemu atau setelah mengetahuinya kalian ganti dengan koding dibawah ini :

kemudian simpan