Cara Membuat Widget Related Posts di Blogger/Blogspot

Widget Related Posts (Tulisan terkait) adalah list/daftar judul postingan yang muncul dibawah setiap postingan dan berfungsi mempromosikan postingan-postingan lain agar dibaca juga oleh visitor yang mengunjungi blog kita. 

Related posts yang muncul adalah berdasarkan kesamaan dari label postingan. 

Oleh karena template bawaan blogger tidak memiliki widget related posts ini, maka kita perlu menambahkannya secara manual dengan mengedit HTML templatenya. 

Ada 2 macam related posts yaitu related posts with thumbnail (tulisan terkait dengan gambar) dan related posts without thumbnail (tulisan terkait tanpa gambar).

Related posts yang akan dibuat kali ini adalah related posts tanpa gambar seperti yang bisa dilihat di blog Kang Asep Sule ini dibawah setiap postingan muncul widget Related Posts sebanyak 10 judul postingan. Kenapa blog kang asep sule menggunakan widget related posts tanpa gambar thumbnail? alasannya simpel, biar bisa munculin related posts yang banyak. Coba bayangin kalo pake gambar mungkin ga karuan jadinya bisa berdempet-dempetan banget atau bisa juga judul postingan malah kepotong.

Tutorial cara menambahakan widget related posts / tulisan terkait di blogspot:

• Login ke blogger.com
• Masuk ke Rancangan > Edit HTML
• Ceklis "Expand Widget Templates"
• Cari </head> (Gunakan control F untuk mencari)
• Tambahkan kode HTML berikut sebelum </head>

<style> #related-posts { float : left; width : 680px; 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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAp2i54uIAS-80795ujtR7oon189pQRmsOvwsydCpvOt-MeV499pimiiWA03bZ6vFZT3mDP1Svtmhf5xQFKI1vG6JmCuDESbTd9zVSNcVD9tXWnzdxP8BPzeY-n3T2xoE3yXp5M_QoBjY/s1600/rss.png&quot;) 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://kangasepsule.16mb.com/Related_posts.js' type='text/javascript'/>

• Cari <data:post.body/> atau ada juga yang <div class='post-body>, bila ada 2, cari <data:post.body/> yang ke 2
• Tambahkan kode HTML berikut ini tepat dibawah <data:post.body/> atau <div class='post-body>, bila tepat dibawah <data:post.body/>, ada </b:if>, letakkan kode berikut setelah </b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

• Jangan lupa Simpan template nya.

Untuk mengganti berapa jumlah judul postingan yang muncul sebagai related posts, ganti angka 10 yang berwarna merah diatas sesuai selera.

Demikian tutorial cara membuat widget related posts di blogspot, bila ada pertanyaan, atau ada yang mau menambahakan silahkan komen dibawah bisa komen blogger atau komen facebooker