cara memasang populer Post thumbnail

Tags

cara membuat popular 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 == &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>

 

  • 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 == &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-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/> <!-- (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>

 

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

 

  • kemudian simpan


EmoticonEmoticon