Cara membuat Artikel terkait dengan Gambar

Sebelumnya kita juga sudah pernah membahas tentang membuat artikel terkait atau related posts, tapi artikel terkaitnya tidak beserta gambar, alias judul postingannya saja.

Dan sekarang kita akan membahas cara membuat artikle terkait muncul dengan gambar dan judul postingan nya,

Bagi sobat yang ingin menggunakan artikel terkait ini, ikuti langkah dibawah :

1. Login ke Blogger.
   
2. Klik Tata Letak.
   
3. Klik tab Edit HTML.
   
4. Kemudian klik Expand Template Widgets .
   
5. Cari kode </head> , lalu letakkan kode dibawah tepat diatas </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='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. Kemudian cari kode

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

jika tidak ditemukan coba cari kode di bawah ini

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


jika masih tidak ketemu, sobat bisa mencari separoh dari kode tersebut seperti : footer-line-1'

jika sudah ketemu, Sekarang tinggal meletakkan kode di bawah ini sesudah 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><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<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-->

Keterangan :

• Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.
  var maxresults=5;
• Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini
  var relatedpoststitle="Related Posts";

Selamat mencoba :)