Related Post memang sangat diperlukan di dalam sebuah blog, entah dengan tujuan SEO [saya juga tidak begitu tahu] atau untuk membuat si pengunjung betah berlama lama di dalam sebuah blog. Banyak sekali tutorial mengenai Related Post. Dan saya juga ingin memberikannya untuk Anda. 

related post bergambar

Hasil dari Tutorial Cara Membuat Related Post Bergambar ini akan mirip seperti punya saya [ lihat di bawah postingan ini ] . Jika Anda berminat, silahan ikuti Tutorial Cara Membuat Related Post Bergambar Berikut  :

Log in ke blogger.com dengan ID Anda.
Klik Rancangan pada dashboard menu
Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
Selanjutnya cari kode berikut </head> [ biar mudah, pake ctrl+F ]
Letakkan kode di bawah ini sebelum kode </head> tersebut :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->



Sekarang cari kode seperti kode dibawah ini :



<div class='post-footer-line post-footer-line-1'>

Jika tidak menemukan kode diatas, coba cari kode seperti ini

<p class='post-footer-line post-footer-line-1'>

Kalo sudah ketemu, sobat tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Lalu Save / Simpan

Semoga membantu, terimakasih telah berkunjung di blogBREM