Cara Buat Related Post Dengan Gambar

Artikel terkait pastinya kamu sudah tau dong, artikel terkait atau related post adalah artikel yang saling berhubungan atau yang di kelompokan di dalam label blog kamu, Dengan memasang artikel terkait ini juga kita dapat menambah jumlah pageview blog karna bukan tidak mungkin pengunjung akan melihat juga artikel terkait tersebut yang mungkin berhubungan dengan artikel kamu.

Caranya adalah:

1. Login ke akun Blogger sobat. 
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget). 
3. Dengan menggunakan CTRL+F atau F3, cari kode </head>
4. Pastekan kode di bawah tepat di atas kode </head>
<!--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: Georgia, Times New Roman , 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/AVvXsEi-pMVLZ9K4QKnJMJLSNWhpPsDcTQ0-CNtFXrtfF_eTBsOQt3oZbZ1vqe5jnRvkU1doJENOYFR_D1NEoCGf93snK4WImOJ952j6XhXJc4dl-8Goov2gpD-K5XhrcNQPkaXy_PIQYaviP04/s400/noimage.png"; var maxresults=5; 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-->

5. Lanjutkan dengan mencari kode <data:post.body/>  dan pastekan kode dibawah ini tepat di bawah kode <data:post.body/>  tadi.
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->
6. Simpan Template sobat, dan lihat hasilnya.
   Keterangan :
   
   var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat. var relatedpoststitle="Related Posts"; kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.

Contoh hasil setelah kode-kode diatas terpasang dengan benar:

Demikianlah posting mengenai cara membuat artikel terkait dengan thumbnail. Semoga bermanfaat buat semua.