Cara Membuat Related Post (artikel yang berkenaan) dengan Thumbnail

Related post meerupakan fitur artikel berkenaan yang ditambahkan oleh si pemilik blog agar pengunjung dapat mengetahui artikel lainnya dalam blog tersebut. blog akan secara otomatis membuat daftar artikel yang kita posting berdasarkan keterkaitannya dengan artikel lainnya. biasanya fitur ini diletakkan dibawah postingan.

ngerti ga sih saya ngomong panjang lebar. begini lah screen shotnya. silahkan dilihat gambar dibawah. kurang lebih seperti itu.

contoh related post

tertarik untuk memasangnya di blog anda? langsung aja ini caranya :

1. Log in ke blogger.
2. Pada Menu klik Rancangan ➨ edit HTML ➨ centang  Expand Template Widget, download dulu template sobat untuk mengantisipasi bila ada kesalahan.
3.  Selanjutnya cari kode </head> . jika sudah ketemu silahkan paste kode dibawah ini di atas kode </head>

    <!--Related Posts with thumbnails Scripts and Styles Start-->
   

   <!-- remove --><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 type='text/javascript'>

   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxCBoMPj_ZUMnmBMiGMYv7NKZLo1qdvelu6q0xFUgCKrl2lxzds2AuFXdikxJA1pW8yUC-KusUeH_D9vUtYij2MZv3xbo6M-8qdrO0NyUWxlmZVbLE9CCayirnXNLIpt_WPm47X5zxeg/s400/noimage.png";

   var maxresults=5;

   var splittercolor="#d4eaf2";

   var relatedpoststitle="Related Posts";

   </script>

   <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

   <!-- remove --></b:if>

   <!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan:
Kode yang berwana merah adalah jumlah related posts yang akan di tampilkan, sobat bisa merubahnya sesuai keinginan sobat.

4. Cari kode <data:post.body/> (jika sobat sudah memasang radmore otomatasi biasanya ada dua atau tiga kode <data:post.body/> jadi letakkan di bawah <data:post.body/> yang kedua ya.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Klik save template.
  mudah bukan menerapkannya ke blog kita? selamat mencoba semoga bermanfaat.