Membuat Related Post dengan Gambar (Thumbnail)

Pada postingan sebelumnya saya sudah berbagi mengenai membuat related post dengan thumbnail dan comment, kali ini saya ingin berbagi sedikit tips dan trik membuat related post dengan thumbnail disertai dengan sedikit ringkasan artikelnya. Langkah-langkahnya seperti ini :

1. Login ke blogger kamu, lalu masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan (jangan lupa centang Expand Widget Template).
2. Temukan kode ini: </head> kemudian salin kode di bawah ini dan letakkan di atasnya.

   <!--Related Posts with thumbnails Scripts and Styles Start-->
   <!-- remove --><b:if cond='data:blog.pageType == "item"'>
   <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: Arial, Helvetica, Sans-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/AVvXsEgxPEdkoqygF36KjVRREYuZhGp5tXitOS33hIN4SkvHIr_xLI5yEf_t4I6Qf3H85DQZaQA6X1hEZ_mmW5hyghqkyLdt1KKRJBVC0BhBTwVczk9PiMLK1_eyayYsxm0tth5s2hxDDZgbkug/s400/noimage.png";
   var maxresults=7;
   var splittercolor="#d4eaf2";
   var relatedpoststitle="Related Posts";
   </script>
   <script src='http://infonetmu.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-->
3. Temukan kode ini: <div class='post-footer-line post-footer-line-1' /> kemudian salin kode di bawah ini dan letakkan di dibawahnya.

   <!-- 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=8&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://heruiryanto.blogspot.com/'><img style="border: 0" alt="Heru Iryanto" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
   </b:if></b:if>
   <!-- Related Posts with Thumbnails Code End-->
4. Klik Preview, jika tidak ada error maka klik Simpan.
5. Selesai

Hasilnya seperti ini :

Pada langkah 2, anda dapat merubah maxresults=7; , sesuai dengan bilangan yang anda ingin tampilkan sebagai related post.
Pada langkah 3, anda juga harus merubah max-results=8 , dengan angka pada langkah 2 ditambah 1.

Semoga bermanfaat.