Cara Membuat Related Post dengan Thumbnail (Gambar)

Baiklah disore hari yang dingin ini saya akan share tentang Cara Membuat Related Post. Ya lebih dikenalnya dengan sebutan artikel terkait yang biasanya diletakkan dibawah postingan blog.  Pada postingan sebelumnya saya juga telah share Cara membuat Artikel Terkait ditambah dengan fungsi scroll. Dan sekarang saya akan mengulas kembali Cara Membuat Related Post tapi dengan Thumbnail (Gambar). Pastinya akan lebih membuat tampilan blog kita lebih menarik lagi untuk dikunjungi. Yuu langsung saja kita menuju TKP untuk membuat sekaligus memasangnya di blog tercinta. hehehe, tapi sebelumnya bagi yang ingin melihat hasilnya silahkan kunjungi blog yang satu ini [Make Your Soundrenaline]

Langkah-langkahnya seperti biasa Sign in akun blognya masing2. Lalu klik Layout > Template > Edit HTML. dan selalu biasakan centang "Expand Widget Template". Jika sudah Selanjutnya cari kode </head> untuk mempermudah pencarian gunakan ctrl+f .

Lalu letakkan kode script dibawah ini tepat diatas 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/AVvXsEiHSRkWzYbYb49_0-fV9gLI2FMvwwiyaKQAmatdt25eVmSdFqW64xUW3H0xd-2BpjvQGFfEbCQgvV68KoGP9tjFUiULumaKc0xpkAGfvJvkerNrNH0ZjEE3_3vnKcU-ysPR3RU4MGERdiI/s400/noimage.png";  var maxresults=4;  var splittercolor="#d4eaf2";  var relatedpoststitle="Related Posts";  </script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<!-- remove --></b:if>  <!--Related Posts with thumbnails Scripts and Styles End-->

NB:
- var maxresults=4 ini adalah jumlah related post yang ditampilkan, silahkan ganti sesuai dengan keinginan
-  var relatedpoststitle="Related Posts" adalah tittle dari related post, silahkan rubah sesuai dengan keinginan


Jika sudah, selanjutnya cari lagi kode  <div class='post-footer-line post-footer-line-1'> (dan biasanya terdapat 2 kode <div class='post-footer-line post-footer-line-1'> yang sama dalam template, pilih kode yang kedua) Dan letakkan kode script dibawah ini tepat dibawah <div class='post-footer-line post-footer-line-1'>

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