Membuat Related Post Atau Artikel Terkait Dengan Gambar DiBlog

Contoh :

Artikel terkait yang dilengkapi dengan gambar visual membuat pengunjung lebih tertarik untuk melakukan klik. Dengan begitu, page view blog Anda pun meningkat.

Untuk contohnya sendiri dapat dilihat pada blog ini, letaknya tepat di bawah postingan.

Cara Membuat Artikel Terkait dengan Gambar

1. Pada Dashboard Blogger Anda, masuk ke Template, pilih Edit HTML.

2. Pasang CSS untuk mengatur tampilan related post dengan gambar.

Letakkan sebelum kode ]]></b:skin> yang dapat dicari dengan Ctrl+F.

Agar lebih maksimal, CSS-nya dapat diletakkan pada bagian posting.

CSS

#related_posts{margin-top:15px}
#related_posts h4{color:#000;background:#f0f0f0;padding:10px;margin:0 0 5px;font-size:80%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size:12px;}
#related_img img{float:left;margin-right:7px;border:1px solid #ccc;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}

3. Berikutnya memasang script yang akan memanggil related post dengan gambar.

Cari kode <data:post.body/> di dalam template. Saya menemukan 2 buah kode di template saya. Letakkan script di bawah kode yang pertama.

Patokan lain adalah kode <div class='post-footer'> yang kurang lebih memiliki arti bagian bawah postingan. Letakkan sebelum kode tersebut.

Script

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost_gambar.js' style='text/javascript'/>
<div style='clear:both;'/>
<div id='related_posts'>
<h4>Artikel Terkait :</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>
<!-- Related Post Widget End -->

Silahkan ubah tulisan berwarna merah. Beberapa yang sering digunakan antara lain Related Post, Artikel Terkait, You Might Also Like, Artikel yang Berhubungan, dan masih banyak lagi.

4. Save Template.