Cara membuat related post versi 2

Farhan Share - sobat farhan hari ini farhan kembali lagi mau nge-share tentang Cara membuat related post versi 2 (related post tampilanya seperti gambar di atas ini). apa sih related posti itu sobat? related post adalah artikel yang bersangkutan dengan artikel yang sobat baca. sekarang bagi para blogger mungkin related post ini udah menjadi widget wajib di blog/web mereka masing-masing, karena visitor menjadi lebih mudah dalam mencari artikel yang mereka cari. ternyata sobat membuat related post ini tidak susah dan ternyata mudah loh sobat. yap, langsung aja ini dia langkah-langkahnya sobat.

1. login ke Blogger.

2. masuk ke Dashboard.

3. Pilih Template.

4. pilih Edit HTML

5. jangan lupa centang kotak "expand template widget".

6. Selanjutnya sobat cari kode ]]></b:skin> (memudahkan pencarian dengan ctrl+f), setelah ketemu kode ]]></b:skin>, sobat letakkan kode di bawah ini diatas kode  ]]></b:skin>.

<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/AVvXsEgtH3eVP1n2iXAIkxeQkMKi9fQjguVwGVk7pPMQ_1K2EJoU_mRZEvwKEjMPMS5McH9E7siOWHsd8FBVyZfdnw-hNq2tlXwNhCvJtzUG21KwZcb3kC-iqg2U2WZ5MlznjnGW_j2r1zDGOFo/") 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://yourjavascript.com/19336213112/relate_post.js' type='text/javascript'/>

7. Masih Di Edit html sobat, selanjutnya cari kode <data:post.body/>, lalu sobat letakkan kode di bawah ini 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 To This Article : </b></font><font color='#FFFFFF'>

<b:loop values='data:post.labels' var='label'><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>

8. Klik "Save" dan selesai.

Selamat mencoba, bila ada pertanyaan comment di bawah.