Widget Related Post Untuk Blog

Pada postingan kali ini, saya akan menshare bagaimana caranya untuk, membuat WidGet Related Post atau sering juga disebut dengan post-post terkait dengan post yang sedang dibaca.


WidGet Related Post mwrupakan widget yang cukup penting dalam sebuah post, disaat para pengunjung selesa membaca dan mereka melihat relate post, maka mereka akan terus membaca lagi hal-hal yang mereka cari, Caranya :
1. Seperti biasa, masuk ke Edit HTML
2. Masukan Kode :

<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/AVvXsEiJCr__D4yMoxwKzKOGMRHdt7o16gobec6JHGgPgmkCike6h-HMFG5rqj7yOZHcOP2JjUrlCOst_uqOzfQGwpTWbFga5KFoBpWyNe0ZlwG06wQ3q-Ec6dEdsJ2Svsof8z-ySBMDm_GEXu0/") 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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

Masukan kode diatas "</head>" (gunakan Ctrl+F). 
3. Lalu masukan kode

<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>

Masukan kode Dibawah "<data:post.body/>"...
4. Pilih Save Template

Terimakasih kunjungannya