Membuat Artikel Terkait dengan Thumbnail

Sekarang saya akan membahas tentang Trik Blog yang sudah saya beri judul Membuat Artikel Terkait dengan Thumbnail. Nah, kalo kita lihat di beberapa blog yang membahas tentang Artikel Terkait, tampilannya yang paling utama adalah di bawah posting. Trik yang akan saya jelaskan juga begitu namun bedanya menggunakan thumbnail. Eh, tapi kayaknya udah banyak yang membahas Membuat Artikel Terkait dengan Thumbnail tapi saya beda. Mereka biasanya menggunakan pihak ketiga yaitu LinkWithin dan saya tidak memakainya (hehe). Untuk screenshot kita dapat melihat gambar berikut ini:

Dari pada moler-moler nggak karuan, ayo deh kita lakukan caranya:

1. Login di Blogger ---> Layout/Tata Letak ---> Edit HTML
2. Centang pada expand template widget
3. Cari kode </head> dan ganti dengan kode berikut ini:
   

   <!--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://ardi33.fileave.com/relatedthumbs.js' type='text/javascript'/>
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
   </head>

4. Kemudian cari kode berikut:
   

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

   Kalau tidak ada coba kode ini:
   

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

5. Kemudian Taruh kode di bawah ini di atas kode tadi:
   

   <!-- 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.ardi33.web.id/2009/09/membuat-artikel-terkait-dengan.html' style='display:none;'>Artikel Terkait dengan Thumbnail</a><a href='http://www.ardi33.web.id' 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-->

6. Anda dapat menyesuaikan jumlah maksimum Artikel terkait yang tampil dengan mengedit kode yang berwarna biru (judul)

Jika terdapat kesalahan, mohon beritahu saya dengan mengisi kotak komentar, nanti akan secepatnya saya jawab :D

Semoga bermanfaat...