Cara Membuat Related Post Dengan Gambar

Cara membuat related post dengan gambar thumbnail atau foto di blog ini dibuat untuk mendukung SEO Onpage. Pemasangan related post atau artikel terkait pada blog dapat membantu Google dan mesin pencari lainnya mendeteksi posting yang saling berhubungan.

Ketika mengunjungi suatu halaman artikel pembaca situs / blog juga dipermudah dalam mengetahui artikel yang saling berhubungan. Setelah pembaca membaca artikel, kemudian bila pembaca tertarik dengan foto atau gambar thumbnails dan judul artikel pada related post dibawah halaman, tentu pembaca akan mengungjungi artikel tesebut.

Cara Membuat Related Post dengan Gambar

1. Copy + Paste kode di bawah ini diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{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;width:285px;height:150px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:285px}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>

Catatan:

kode berwarna biru adalah ukuran lebar dan tinggi gambar/foto yang akan ditampilkan, bisa diubah sesuai selera.
kode berwarna merah adalah lebar judul, samakan dengan lebar gambar/foto.

2. Copy + Paste kode di bawah ini diatas kode <div class='post-footer'> (jika ada 2 kode ini, pilih kode yang ke-2):

<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>
<script type='text/javascript'>
var currentposturl="<data:post.url/>"; var maxresults=6;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>