MEMBUAT ''ARTIKEL TERKAIT / RELATED POST'' DILENGKAPI GAMBAR

Related post adalah salah satu cara untuk memudahkan pengunjung mencari postingan kita sehingga tidak perlu bingung-bingung mau kemana kursor diarahkan. Selain itu kita juga bisa memaksimalkan traffic pada postingan yang kurang begitu banyak pengunjung. Kelebihan lainnya adalah dengan
adanya gambar akan terlihat lebih menarik dan terkesan rapi. Tapi jangan terlalu banyak juga memasang artikel pada related post. Karena akan memakan banyak tempat dan terlihat acak-acakan. Nah..bagaimanakah cara memasang related post dibawah postingan seperti punya saya ini?

Berikut langkah-langkahnya:
1. LOGIN ke blog sobat, pilih RANCANGAN, dan klik EDIT HTML
2. Centang EXPAND TEMPLATE WIDGET
3. Cari kode </head>. Atau lakukan pencarian cepat dengan menekan tombol
    ctrl+F pada keyboard anda lalu tekan ENTER yang akan menampilkan kotak  
    FINE pada sudut kiri bawah browser anda. Selanjutnya ketik </head> pada kotak
    tersebut.
4. Copy kode berikut tepat diatas kode </head>

<!--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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, 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='https://sites.google.com/site/bloggerbugis/js/relatedthumbsbloggerbugis4U.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Selanjutnya cari kode  <div class='post-footer-line-post-footer-line-1'>, atau jika
    tidak ketemu cari kode <p class='post-footer-line-post-footer-line-1'>. Kemudian
    copy kode berikut tepat dibawah salah satu kode tersebut

!-- 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-->

Untuk yang saya kasih warna merah adalah jumlah posting yang akan dijadikan related post, sedangkan yang hijau adalah judulnya (Bisa sobat ganti dengan kata-kata lain tanpa menghilangkan tanda petik.

Mudah kan... Selamat mencoba!