Popular Post Dengan Grid Thumbnail

Jika kita membahas Widget Popular post pasti semua sobat blogger udah pada tau , karena widget yang satu ini memang udah asli bawaan dari blogger dan biasanya ketika kita bikin blog atau baru aja instal template widget ini udah nangkring di sidebar blog . Fungsi dari widget ini adalah untuk menunjukan kepada pengunjung serta admin blog artikel apa saja yang jadi favorite para pengunjung blog atau site .

Untuk Viewnya sendiri blogger sudah menyediakan setting entah akan di set setiap saat , mingguan atau bulanan yakni 30 hari terakhir .Cuman ... Tampilan *yah lagi-lagi bahas tampilan ... yah tampilan widget asli bawaan blogger ini memang kurang menarik untuk di liat . Untuk itu kita harus membuatnya lebih menarik . Disamping membuat tampilan widget ini akan lebih menarik , Penambahan efek Grid thumbnail view pada widget ini juga akan membuat suasana blog sobat akan lebih rapi dan elegant .

Untuk itu mari kita langsung ke topik pembahasan materi kali ini yakni Membuat Popular Post dengan Efek Grid Thumbnail .Sebelum memulai HTML Editing selalu biasakan untuk memback up templat yang sedang anda gunakan demi keamanan .

1.Silahkan anda masuk ke blogger anda Pilih tata letak > Tambah Element > Popular Post .
2. Langkah selanjutnya adalah silahkan menuju ke bagian Template > Edit HTML > Expand Widget .
3. Cari kode ]]></b:skin> menggunakan tombol Ctrl + F atau bisa juga dengan menekan tombol F3 pada keyboard .
4. Selanjutnya Copy paste kode di bawah ini dan letakkan di atas kode pada nomor 3 tadi yakni ]]></b:skin>

.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.Silahkan ganti ukuran ( warna biru ) sesuai selera dan template anda .
6.Lalu 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 diatas ( no.6) dengan kode di bawah 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 dan selesai . Selamat .

 *Note : saya hanya share Cara Membuat Popular Post dengan Efek Grid Thumbnail  , jika ada masalah saya tidak bertanggung jawab :D . kalo ada yang mau ditanyakan silahkan tinggalkan pertanyaan anda pada kotak komentar di bawah posting ini .

Author : Ichi Hikaru

Share this Article

Related Posts