Cara Memasang Related Post di Blog

Jika anda belum memasang artikel terkait bergambar atau related posts with thumbnail di blogger / blogspot, maka sebaiknya segera pasang related posts thumbnail, kenapa artikel terkait yang disertai gambar di setiap halaman posting sangat penting di blog anda?, karena artikel terkait ini berfungsi untuk memudahkan pengunjung blog menemukan konten artikel yang berkaitan alias relevan. Selain mempermudah, juga akan memberikan tampilan blog lebih cantik dan profesional...duh, walaupun blognya masih gratisan tapi gak ada salahnya menggunakan alat navigasi related posts bergambar ini untuk memberikan kemudahan bagi pembaca artikel, bukankah kita harus melayani tamu yang datang ke blog kita dengan baik dan sopan?...duh..ya emang.

1. Login ke akun blog anda.

2. Masuk menu Design > Edit HTML > centang "Expand Widgets Templates"

3. Cari kode </head> lalu simpan kode berikut di atasnya.

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HJIILxIPYCq8H_QH1IsqovjkrfIqWnSyF9_UAuwtnQ4CenLkifwYWbVbr3gIAW1H8yjSNQujbWJ9xWpJV7oK1bwtDbBQIOkq7Y5QAvTF8M-9BbT2SQ4YHPjm4qw4yqtIE7LlVw39VeLj/";
var maxresults=6;
var splittercolor="#cccccc";
var relatedpoststitle="Artikel terkait:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

4. Selanjutnya cari kode <div class="post-footer-line post-footer-line-1"> atau post-footer-line-1 (gunakan Ctrl + F).

5. Simpan kode berikut tepat di bawahnya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Save / Simpan template, kemudian lihat hasilnya di halaman posting blog.

Catatan: Anda bisa mengubah beberapa fungsi yang berwarna merah, silahkan cari kodenya

var maxresults=6; - Akan menampilkan jumlah artikel terkait yang muncul di setiap posting, silahkan ganti.

var splittercolor="#cccccc"; - Warna tampilan garis pembatas di antara thumbnail artikel, silahkan ganti dgn kode warna html yg cocok di template blog anda.

var relatedpoststitle="Artikel terkait:"; - Anda bisa mengganti judul yang sesuai keinginan anda.

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HJIILxIPYCq8H_QH1IsqovjkrfIqWnSyF9_UAuwtnQ4CenLkifwYWbVbr3gIAW1H8yjSNQujbWJ9xWpJV7oK1bwtDbBQIOkq7Y5QAvTF8M-9BbT2SQ4YHPjm4qw4yqtIE7LlVw39VeLj/" - Yang akan menampilkan gambar default untuk postingan tidak memiliki gambar, anda bisa menggantinya dengan gambar milik anda.

Apabila ada kesulitan dalam cara memasang artikel terkait bergambar di Blog Anda, silahkan tanyakan via komentar, mudah-mudahan saya bisa membantu anda untuk memperbaiki kesalahan saat pasang related posts with thumbnails di blogger anda. 

source