Membuat Popular Post dengan Efek Grid Thumbnail

Published by Kurnia Septa Minggu, 03 Februari 2013

Popular Post adalah gadget/widget yang cukup lama ada di blogpsot atau blogger.com. Widget Popular Post ini menampilkan postingan yang banyak dilihat (view). Ukuran popularitas sebuah post ditentukan oleh seberapa sering post itu dibaca oleh pengunjung blog. Kita bisa memodifikasi tampilan Popular Post menjadi efek grid thumbnail, yaitu thumbnail dari post tersebut dibuat berjejer, seperti galeri gambar/foto.

Adanya widget ini bisa memberikan menu pada pembaca atau blogger, untuk melihat post-post yang populer di blognya. Dari segi fungsi atau manfaat, widget ini sangat bermanfaat, apalagi ada pilihan-pilihan untuk mengatur widgetnya. Tidak hanya judulnya saja, kita bisa menampilkan Thumbnail gambar dan cuplikan isi  post. Selain itu, bisa juga diatur Popular Post itu berdasarkan paling banyak dikunjungi setiap saat, 30 hari atau 7 hari terakhir.

Cara menambahkan widget Popular Post adalah saat di dasbor pilih Tata Letak lalu tambahkan Tambah Gadget. Pilih Entri Populer (Menampilkan daftar pos yang paling populer dari blog Anda). Atur Popolar Post (Entri Populer) menampilkan thumbnail gambar.

Cara Membuat Popular Post dengan Efek Grid Thumbnail
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut di atasnya

.sidebar .popular-posts ul{margin:0;padding:0px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 0px;background:none;float:left;width:79px;list-style-type:none;border:none;line-height:0px;}
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 75px;height: 75px; background:#333; border:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc;padding:0px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}

5. Angka 75 adalah ukuran thumbnail yang ingin ditampilkan, dan 79 untuk memberikan sedikit jarak. Kamu dapat mengubahnya sesuai dengan lebar sidebar blogmu, dan jika ukuran 75 diubah maka 79 juga harus diubah, berarti selisihnya 4.

6. Kemudian cari kode yang seperti ini:

<!-- (3) Show only thumbnails -->
<div class="item-thumbnail-only">
<div class="item-thumbnail">
.......................
.......................
<b:else/>
<!-- (4) Show snippets and thumbnails -->

7. Ganti kode di atas (no. 6) dengan kode berikut ini;

<!-- (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.prismestate.com/images/noimages.png'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->

8. Simpan template jika sudah selesai