Cara Membuat Artikel Terkait dengan Gambar Berjalan Pada Blog

Letak perbedaannya yaitu related post kali ini dengan menggunakan gambar dan gambarnya bisa jalan lagi, keren kan? Dijamin sobat pasti tertarik mengganti related yang sobat pake dengan related post yang satu ini. Oke, langsung aja saya akan menjelaskan bagaimana cara membuatnya. Sobat ikuti langkah-langkah di bawah ini dengan benar dan jika sobat tidak ikuti dengan benar maka sobat akan tersesat hehehe.

1. Terlebih dahulu sobat login ke blogger
2. Pilih Template - Edit Html - Lanjutkan
3. Centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code </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-->
</head>
5. Copy script
  di bawah ini dan letakkan di bawah code <div class='post-footer-line
  post-footer-line-1'> jika tidak ada cari code ini <p
  class='post-footer-line post-footer-line-1'>
<!-- Marquee Serbablog
  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=12&quot;'
  type='text/javascript'/></b:if></b:loop>
<h3><b>Related
  Posts</b></h3>
<marquee align='center'
  behavior='alternate' direction='left' onmouseout='this.start()'
  onmouseover='this.stop()' scrollamount='2' width='100%'>
<script
  type='text/javascript'>
var
  currentposturl=&quot;<data:post.url/>&quot;;
var
  maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div
  style='clear:both'/>
</b:if>
<b:if cond='data:blog.url
  == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a
  href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html'
  style='display:none;'>Thumbnail Related Post</a>
<a
  href='http://www.bloggerplugins.org/' style='display:none;'>blogger
  tutorials</a>
</b:if>
</b:if>
<!-- Marquee
  Serbablog Related Posts with Thumbnails Code End—>

6. And finally Simpan/save template.

Catatan:
var maxresults=10; maksudnya ialah jumlah artikel yang akan ditampilkan pada related post ganti sesuai dengan keinginan sobat

Hasilnya akan nampak seperti di bawah ini