Menampilkan Related Post Di Bawah Postingan Blog

Related post adalah widget yang biasanya terdapat dibawah postingan blog. Related post (artikel terkait) mempunyai keterkaitan antara postingan satu dengan yang lain berdasarkan labelnya.

Berikut langkah -langkah menampilkan Related Post di bawah postingan blog.

• Masuklah ke akun Blogger, lalu pilih Template.  

• Klik Edit HTML.

• Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian).

• Setelah anda menemukannya, copy kode javascript di bawah ini dan letakkan (paste) di atas 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/AVvXsEhAdBlWNZ4SVy9EABfb06saaLefeA3bWUuWyKs_Xvtbm-nhRrO7YhT3BkIqhSBq3108I5Pny-fTFALPOcxQ5BNFngxAl2JIp_Dy-7NtPGhdjMpkwQN9yFUoBrEBp7zIHWyGCKvr4zrmzGY/") 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>

• Selanjutnya anda cari kode <data:post.body/>, mungkin anda akan temukan banyak, pilih satu saja. Setelah ketemu, copy kode di bawah ini dan letakkan (paste) tepat di bawah kode <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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <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> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>

• Setelah selesai, lalu simpan template blog anda, dan lihat hasilnya.

Share this :