Dengan adanya Related Post pada sebuah website atau blog akan sangat membantu pengunjung situs anda untuk membaca sebuah artikel yang terkait dengan postingan anda. Berikut adalah langkah-langkah dalam membuat Related Post Bergambar :
1. Masuk Akun Blogger anda.
2. Pilih Template.
3. Backup terlebih dahulu Template anda sebelum dimodifikasi.
4. Lalu pilih Edit HTML.
5. Centang tulisan Expand Template Widget (untuk menampilkan kode html secara keseluruhan).
6. Cari kode </head> dengan cara menekan tombol keyboard Ctrl + F.
7. Copas kode dibawah ini persis diatas kode </head>.
<b:if cond='data:blog.pageType == "item"'>
<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.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black; }
#related-posts a:hover{
color:black;
}#related-posts a:hover {
background-color:#d4eaf2;}
</style>
<script src='http://kangdansen.googlecode.com/files/relatedpostwiththumbnail.js' type='text/javascript'/>
</b:if>
8. Sekali lagi cari kode <div class='post-footer-line post-footer-line-3'>.
9. Copas kode dibawah ini tepat dibawah kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.depotsenigrafis.com/?Kanvas_Printing' style='display:none;'>Kanvas Printing</a><a href='http://depotsenigrafis.blogspot.com/2012/02/kanvas-printing.html' style='display:none;'>Kanvas Printing</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artikel Terkait :";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
10. Ganti tulisan "Artikel Terkait" yang berwarna merah dengan selera anda.
Selamat mencoba dan semoga artikel ini bisa bermanfaat buat rekan-rekan bloger nusantara dan salam Indonesia Raya!!!
Best regards,