Membuat Artikel Terkait dengan Thumb

Halo sobat Bang Dayat, kali ini saya ingin sharing cara membuat artikel terkait dengan thumb yang berkaitan dengan tutorial blogspot. Mungkin ada sebagian sobat yang belum tahu apa itu artikel terkait? Artikel terkait itu merupakan list-list beberapa judul yang masih berkaitan dengan postingan yang dibaca yang biasanya terletak dibawah postingan, samping postingan atau diatas postingan. Tapi kebanyakan berada dibawah postingan. Untuk blogspot sendiri artikel terkait berdasarkan label.

Sebelumnya saya sudah pernah postingan tentang artikel terkait ini tapi tanpa menggunakan thumb atau gambar, untuk lebih jelasnya baca disini. Untuk artikel terkait dengan thumb ini tampilannya lebih menarik dan lumayan keren. Untuk contohnya sebagai berikut.

Untuk membuatnya tidaklah sulit, berikut cara-caranya :

1. Masuk ke akun blogger sobat.

2. Sebelum diotak-atik alangkah baiknya diback up dahulu agar templatenya aman.

3. Masuk ke menu template.

4. Pilih edit html.

5. Jangan lupa untuk mencentang Expand Template Widget.

6. Tekan Ctrl+F untuk mencari cepat kode </head>.

7. Letakkan kode dibawah in 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%; width:auto;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:.75em;margin-top:0;padding-top:0}#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwsEgvWdQaDZZcXG5W3J-4hc45r41ObfhSz16jZyyeT2R9aG1Mlb1BhbShS0sOp22ZeE99aloVyESDrbdHYBYBOTHRmQJ_nTMHle8e6e-n5RQUtKN0Jxyg_qF0JWRZRFFaaTo0yjKC6UE/s72/no-image.png&quot;; var maxresults=7; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;Artikel Terkait&quot;; 
</script> 
<script src='http://berbagi-kreativitas.googlecode.com/files/related-posts-thumb.js' type='text/javascript'/> 
<!-- remove --></b:if> 
<!--Related Posts with thumbnails Scripts and Styles End-->

8. Kemudian cari kode <div class="post-footer-line post-footer-line-1"> dan letakkan kode berikut ini tepat dibawah kode tersebut ( <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>

9. Kemudian pratinjau untuk mengecek apakah berhasil atau tidak, jika berhasil (tidak error) save template.

10. Keterangan : warna biru = link thumb gambar yang akan muncul jika postingan tidak menggunakan gambar, warna hijau = jumlah artikel yang akan ditampilkan, warna merah = artikel terkait bisa diganti dengan kata lainnya seperti postingan lainnya.

Semoga berhasil dan jika dalam postingan ini ada kesalahan dalam penulisannya mohon teman-teman luruskan dengan menuliskan komentar.