Membuat Popular Post Dengan Dampak Grid Thumbnail

Link , Optimalkan Blog    Comment   

Popular Post ialah gadget/widget yang cukup usang 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 sanggup memodifikasi tampilan Popular Post menjadi efek grid thumbnail, yaitu thumbnail dari post tersebut dibentuk berjejer, menyerupai galeri gambar/foto.

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

Cara menambahkan widget Popular Post ialah ketika di dasbor pilih Tata Letak kemudian tambahkan Tambah Gadget. Pilih Entri Populer (Menampilkan daftar pos yang paling terkenal 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> kemudian taruh aba-aba 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 ialah ukuran thumbnail yang ingin ditampilkan, dan 79 untuk memperlihatkan sedikit jarak. Kamu sanggup mengubahnya sesuai dengan lebar sidebar blogmu, dan jikalau ukuran 75 diubah maka 79 juga harus diubah, berarti selisihnya 4.

6. Kemudian cari aba-aba yang menyerupai ini:

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

7. Ganti aba-aba di atas (no. 6) dengan aba-aba 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 jikalau sudah selesai
Sumber https://www.kurniasepta.com/