Membuat Related Post Dengan Thumbnail

Related post atau artikel terkait adalah artikel yang berhubungan dengan postingan yang sedang dibaca. Related post ini biasanya di letakkan di bawah postingan agar supaya ketika pengunjung blog selesai membaca artikel di postingan itu maka dia bisa melihat artikel lain yang berhubungan.

Pada blogspot related post ini muncul misalnya di artikel yang membahas atau diberi label, misalnya Tutorial maka yang akan muncul adalah postingan-postingan dengan label Tutorial. Oleh karena itu jika hendak memasukkan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak.

Untuk membuat related post dengan thumbnail di blog kalian, ikuti langkah-langkah di bawah ini:
1. Login ke Blogger
2. Masuk ke menu Template
3. Lalu centang Expand Template Widget
4. Cari kode </head> dan letakkan CSS di bawah ini di atas kode tadi:

<b:if cond='data:blog.pageType == "item"'>

<style>

#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 20px; font-weight: bold; color: ; font-family:'Baumans', sans-serif; margin-bottom: 0.75em; margin-top: 0em;margin-left:63px; padding-top: 0em; } #related-posts a{ ; } #related-posts a:hover{ color:#1d2124; } #related-posts a:hover { background-color:#1d2124; }

</style>

</b:if>

5. Selanjut nya kalian atur sendiri CSS nya

6. Letakkan script ini juga di atas kode </head> tadi:

<script type='text/javascript'>/*<![CDATA[*/var defaultnoimage="http:var maxresults=7;var splittercolor="#0000";var relatedpoststitle="See More Aritcle";/*]]>*/</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

7. Letakkan script HTML di bawah ini di bawah kode data:post.body

<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> <b:if cond='data:blog.pageType == "item"'> <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:if></b:loop> <script type='text/javascript'>var currentposturl="<data:post.url/>";var maxresults=7;var relatedpoststitle="See More Article";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script> </div><div style='clear:both'/></b:if>

Sekian artikel dari saya kali ini tentang cara membuat related post dengan thumbnail, terima kasih sudah berkunjung, semoga bermanfaat