Cara Membuat Related Post Thumbnails Artikel Terkait Blogger

Related post adalah artikel post yang memiliki topik yang sama atau sesuai dengan kategori atau label dengan artikel yang muncul atau sedang dibaca saat itu. Sebelumnya saya pernah membahas hal yang sama yaitu cara membuat related post hanya dengan tampilan tulisan link saja. Saat ini saya akan membahas hal yang sama Cara Membuat Related Post dengan Thumbnails Artikel Terkait Blogger.

Bedanya hanya pada tampilan thumbnails saja, artinya related post yang ditambilkan tidak sekedar tulisan, namun ada gambar yang ditambilkan. Biasanya orang awam menyebutnya artikel terkait dengan gambar. Tujuannya pengunjung bisa lebih tertarik dengan bacaan yang terkait, sehingga pengunjung mau membaca artikel yang diberikan, dan harapannya pengunjung bisa berlama-lama di blog atau website kita. Contohnya bisa kita lihat seperti gambar di atas.

Seperti biasa, mari kita bahas bagaimana Cara Membuat Related Post dengan Thumbnails :

1. Pastinya anda harus login ke blog anda
2. Setelah masuk ke dashboard, silahkan klik Template -- Edit HTML
3. Lalu cari kode </head> dengan cara tekan tombol keyboard Ctrl + F
4. Kemudian letakkan kode berikut ini, tepat di atas  </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:left;width:auto;}
   #related-posts a{border-right: 1px dotted #eaeaea;}
   #related-posts a:hover{background: #EEEEEE;}
   #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
   #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
   #related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
   #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
   <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
   <!-- remove --></b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->

   Catatan:
   - untuk  mengganti tinggi dan lebarnya gambar tau thumbnails, silahkan ganti 100px
   - untuk mengganti warna judul di thumbnails, silahkan ganti angka berwarna biru
   - untuk membuat related post thumbnails tampil di halaman utama, silahkan hapus kode </b:if>
   
   
5. Lalu cari lagi kode <div class='post-footer'> , dengan cara tekan tombol keyboard Ctrl + F
6. Kemudian letakkan kode berikut ini, tepat diatas <div class='post-footer'>
   

   <!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop>
   <script type='text/javascript'>
   var currentposturl=&quot;<data:post.url/>&quot;;
   var maxresults=5;
   var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs();
   </script>
   </div><div class='clear'/>
   </b:if>
   <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
   <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiptwZyqWsCa5eoSmgPpsnRjb3oOR04o2Ic-HOwtO4ynWwu3cgV2fB7wGOSFa5cTVbQRDXj1Jw6CECRCwoS59vC4WpXskOOP9tXOD-2qmWXooCJAm6RCZa3kUK1SHTOUe67287vKT9srx14/s1600/best+blogger+tips.png'/></a>
   </b:if></b:if><!-- Related Posts with Thumbnails Code End-->

   Catatan:
   - untuk mengganti jumlah post yang ditampilkan, silahkan ganti angka 5 pada max-results=5
   - untuk menampilkan related post thumbnails di halaman depan, silahkan hapus kode yang berwarna merah
   
   
7. Simpan atau save Template

Perhatikan:

• Jika tidak dapat tampil related post di blog anda, silahkan cara nomor 5 diganti dengan mencari kode </b:includable> dengan cara tekan tombol keyboard Ctrl + F
• Mungkin anda akan menemukan kode </b:includable> sangat banyak, setelah saya coba yang tepat hanya pada </b:includable> yang ada kode <b:includable id='postQuickEdit' var='post'>
  Jelasnya silahkan lihat gambar di bawah ini
  
• Setelah ketemu, silahkan letakkan kode nomor 6 tepat di atas </b:includable>

Silahkan dipergunakan sebaiknya, jika ada yang belum jelas, silahkan berikan komen anda di bawah ini.

Semoga bermanfaat, selamat mencoba :)