Cara membuat Popular Post dengan Thumbnail Bentuk Grid/Gallery

Related Post atau artikel terkait merupakan sekumpulan link artikel yang ada pada sebuah blog atau website yang akan muncul jika memiliki topik konten yang sama dengan artikel yang sedang dikunjungi.

Related Post ini sangat berfungsi dan berpengaruh sekali untuk suatu website atau blog, salah satunya adalah SEO blog. Dengan menggunakan Related Post ini dapat meningkatkan Page Views, menurunkan Bounce Rate, dan memperlengkap tampilan suatu blog agar terlihat lebih profesional. Biasanya Related Post ini terletak di bagian bawah postingan blog.

Pada kesempatan kali ini, penulis akan membagikan sedikit tutorial singkat Cara Membuat Related Post Tampilan Grid dengan Thumbnail di Blogger. Jika kamu tertarik untuk menggunakannya, kamu bisa simak dalam tutorial berikut ini.

Setelah sebelumnya pernah membahas Cara membuat Popular Post dengan Thumbnail Horizontal, kali ini kita akan mencoba memodifikasi Popular Post dengan Thumbnail Bentuk Grid atau Gallery. Keuntungan dari cara ini adalah kita bisa sedikit menghemat space atau ruang di blog.

Sistem atau Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery ini sebenarnya sama saja dengan dengan Cara membuat Popular Post dengan Thumbnail Horizontal. Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.

Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.

Berikut ini adalah Langkah-langkah untuk Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery:

1. Seperti biasa masuk kedashboard => Design => Edit Html.
2. Cari kode ]]</b:skin>
3. Letakkan kode CSS dibawah ini di atasnya.

.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}
.sidebar .popular-posts ul{margin:0;padding:2px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;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: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}

4. Save template.
5. Kembali ke Dashboard => Design => Add Element.
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.

1. Hilangkan ceklist pada snippet.
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.