Cara Membuat Related Post di Bawah Postingan Blog

Selamat pagi, pada pagi yang cerah ini saya akan membagikan tutorial membuat related post di bawah postingan blog. Related Post adalah kumpulan post yang berkaitan dalam satu label yang sama. Seperti ini contohnya

Sebenarnya apa sih fungsi dari related post? mungkin sobat bertanya-tanya apa gunanya. Nah, kegunaan dari related post adalah meningkatkan traffic blog. Lho kok bisa? Hal ini karena pengunjung biasanya akan mengklik post di dalam related post. Usahakan judul blog menarik untuk di baca.

Jika sobat tertarik dan mau menambahkan related post di bawah postingan blog ikuti langkah-langkah berikut :

1. login ke akun blogger sobat

2. Pilih Template --> Edit HTML

3. Cari kode </head>, gunakan Ctrl+F untuk mempercepat pencarian. Setelah ketemu, copy kode javascript di bawah dan pastekan persis diatas kode </head>.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9UZwDqGem-vr_6FzmDBvM_1YlPF9F6zJCAHH8lrWjPOKuNumzy8lO8dU7bkp24FIJvg_XrKO7IJhqwbrxFmJX9WXYEZdJuGOzLF3QRn3wy2S9XAmZWKEJyNtWds5PWJvkL3NPVRXJqw/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Jangan di save dulu, langkah berikutnya cari kode <data:post.body/>. setelah itu copy dab pastekan kode di bawah tepat di bawah kode <data:post.body/>

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Selesai, jangan lupa save template sobat.

NB: Mungkin ada banyak kode <data:post.body/> tergantung template sobat. sobat coba satu-satu. Kalau di blog sobat ada 3 kode, biasanya kode yang kedua.

Sekian tutorial saya, semoga berhasil dan jangan lupa comment ya