22 September 2017

Widget Grid Related Post di Blogger

Kali ini saya akan memaparan bagaimana membuat Related Post di Blogger yang dilengkapi dengan thumbnail/gambar di masing-masing post, sekaligus related post ini sudah responsive jadi anda tidak perlu khawatir akan berantakan bentuk/posisi ketika blog anda dikunjungi dengan lebar layar yang berbeda-beda.

Related Post ini menampilkan Halaman-halaman yang memiliki label/kategory sesuai dengan postingan yang sedang dibaca oleh visitor sehingga akan memudahkan para visitor untuk mencari postingan yang hampir sama atau terkait saat itu. Dengan begitu pengunjung akan lebih berlama-lama di blog anda, dan pastinya pageview pun akan bertambah.

Dengan alasan di atas, menerapkan Related Post di blogger akan membuat Blog Anda SEO, karena cara kerja dari search engine salah satunya ialah melihat dari berapa lama audience berkunjung, dan berapa banyak postingan yang terbuka.

Oke langsung saja pada pokok bahasan..
hasil dari tutorial kali ini akan menjadi seperti di bawah ini.

ikuti langkah - langkah yang saya jelaskan di bawah ini.

1. Langkah Pertama

Masuk ke Dasbord Blogger - Pilih Tab Theme - Edit HTML
cari kode </head> gunakan CTRL+F dan ketikkan </head> pada kolom pencarian untuk mempermudah menemukan kode tersebut.

Kemudian masukkan kode berikut tepat di atas kode </head>


penjelasan kode:
perhatikan kode yang berada di antara tag <style> ..... </style> berikut :

<style type='text/css'>

#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

</style>
  • kode berwarna merah untuk menentukan lebar dan tinggi Thumbnail/gambar di related post
  • kode berwarna ungu untuk menentukan warna judul postingan related post
  • kode berwarna biru untuk menentukan lebar dan tinggi judul postingan related post
Tambahan, jika anda ingin menampilkan Related Post ini di halaman Home dan Postingan, cukup hapus saja kode ini <b:if cond='data:blog.pageType == "item"'> , kode tersebut tepat di atas tag <style>

2. Langkah Kedua

Masih di kolom Edit HTML, temukan kode <data:post.body/>
masukkan kode berikut tepat di bawah kode <data:post.body/>


penjelasan kode:
perhatikan kode berikut :

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=7;

  • kode yang berwarna hijau untuk menentukan jumlah postingan dalam Related post yang di tampilkan. (jangan sampai salah, ada dua kode berwarna hijau!!! rubah kedua-duanya dan harus sama nilainya!!)
Tambahan, jika anda ingin menampilkan Related Post ini di halaman Home dan Postingan, cukup hapus saja kode ini <b:if cond='data:blog.pageType == "item"'> , kode tersebut tepat di atas tag <div>

sekian tutorial kali ini, semoga bermanfaat
silahkan tinggalkan komentar di bawah jika merasa kesulitan mengikuti tutorial di atas.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post