Cara Membuat Related Post Untuk Blogspot/Blogger

Pasang related post untuk blogger/blogspot. Saat  ini sudah banyak hacking untuk menampilkan link ke artikel terkait (related posting) di bawah setiap posting di blog. Seperti yang satu ini, related posting yang menampilkan artikel terkait dalam kategori/label yang sama. Dengan memasang widget related post dibawah setiap artikel ini akan membuat banyak pembaca akan tetap di situs anda untuk waktu yang lebih lama ketika mereka melihat posting yang berhubungan dengan artikel yang sedang dibaca.
Berikut ini cara pasang related post by category untuk blogspot atau blogger platform:

1. Login ke blogger. masuk ke menu “Desain“(Layout) -> Edit HTML
2. Backup/simpan template untuk jaga-jaga.
3. Centang kotak “Expand Widget Templates“
4. Cari kode </head>, lalu ganti/timpa dengan dengan kode dibawah ini:
<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/AVvXsEjjor3_5ZUSAlqNN5cXeRWYe0WwCfQF-djnmFR7tIr_bBE3cW97yrzpy8kj8t8Vk4Sfj6GjSfwVOIEOXIS4iAf8mCG7zP7AhTJvmO_MtdB2q9bqk74IPATeS-DbxDryYrqW09Dqq5_vB6A/”) 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://jarlok.com/Script/Related_posts_hack.js’ type=’text/javascript’/> </head>
5. Lalu cari kode <data:post.body/>, kemudian ganti/timpa dengan kode dibawah ini:
<data:post.body/> <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>
6. Selanjutnya simpan template. Ohya kalau kesulitan menyalin kode diatas silahkan lihat dan salin disini.
7. Untuk hasilnya lihat diblog ini dibawah setiap artikel.

Untuk merubah berapa artikel ditampilkan ganti nilai max-results=5 pada kode no.5, bagi yang berminat silahkan dicoba.