Widget Related Post dengan Icon RSS

Salam Sejahtera!!! Asyiknya liburan bisa nyempatin buat Blogging..So Apa yach yang mau saya bahas?? Hmm..Oke saya coba share mengenai cara pasang Widget Related Post dengan Icon RSS. Sebenarnya sih saya sudah pernah posting sebelumnya bagaimana membuat related post/posting yang berhubungan pada blogger. Tapi widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan. Tapi sebelumnya anda harus membuat label terlebih dahulu, caranya sobat bisa baca disini.

Setelah label telah dibuat,dan pastikan rss anda valid(available rss),bisa anda klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Baiklah, jika anda tertarik silahkan ikuti langkah-langkahnya sbb:
1. Silahkan dulu Login ke Dasboard Blogger anda
2. Pilih menu Layout==>>Edit HTML
3. Saran saya klik link Download Full Template untuk Back up
4. Silahkan centang kotak Expand Widget Template anda
5. Cari kode tag </head>
6. Copy kode dibawah ini, lalu pastekan, dan letakkan diatas kode tag </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://sites.google.com/site/tutorialbloghost/mypictures/rss.png") 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://heberscript.googlecode.com/files/related-post-widget-for-blogger.js' type='text/javascript'/>

7. Kemudian cari kode tag <data:post.body/> lalu copy-pastekan kode dibawah ini dan letakkan dibawahnya.

<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>

Selesai.
[Happy Blogging]