Memasang Related Post Tanpa Thumbnail Pada Blog

Tentu sobat tidak asing lagi dengan istilah Related Post. Widget yang menampilkan artikel terkait dengan artikel yang sedang dibaca oleh pengunjung.
Ada beragam bentuk Related Post yang bisa kita pakai.
Diantaranya adalah Related Post Tanpa Thumbnail, atau Related Post yang hanya menampilkan deretan judul artikel terkait saja.
Tujuannya supaya pengunjung ingin terus menelusuri halaman per halaman yang pembaca butuhkan di blog sobat.
Mari kita praktekkan caranya.

---

Related Post Tanpa Thumbnail

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode </head>
Langkah 5
Setelah ketemu lalu copy kode dibawah ini dan letakkan diatas langkah 4

<style> #related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; } #related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-postz .widget h2, #related-posts h2 { font-size: 0.7em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-postz a { text-decoration : none; } #related-postz a:hover { text-decoration : underline; } #related-postz ul { border : medium none; margin : 10px; padding : 0; } #related-postz ul li { display : block; background : url("") no-repeat 0 0; padding-left : 21px; padding-bottom : 1px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; font-size: 0.7em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; } </style><br /> <script src='http://blognlike.com/amrit/Host/related.js' type='text/javascript'/>

Langkah 6
Setelah itu lanjut cari kode  <data:post.body/>
Langkah 7
Lalu copy kode dibawah ini dibawah kode langkah 6

<b:if cond='data:blog.pageType == "item"'><br /> <div id='related-postz'><font face='Verdana' size='4'><b>Related Posts:</b></font><br /> <b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script><div align='left' style='font-size:12px'><a href='http://blognlike.com'>Promote Your Blog</a><br /> <div align='right' style='font-size:11px'></div></div></div></b:if>

Langkah 8
Klik simpan dan buktikan! :)