Cara Membuat Related Posts Dengan Icon

Membuat Related posts atau artikel terkait memang sudah sering di bicarakan oleh para master blogger, namun related post yang dimaksudkan disini dengan menampilkan icon di depan judul postingan atau artikel, yang saya dapat dari blognya dan langsung saya pasang di blog ini, 

Berikut caranya : 

  1. Login Blogger

  2. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"

  3. Tekan Ctrl + F

  4. Cari kode </head>

  5. Letakkan kode dibawah ini tepat di bawah kode </head> 

<style type='text/css'> #related-posts { float : left; width : 100%; 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;http://bengkelide.blogspot.com/favicon.ico&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://sites.google.com/site/irfansynyster/javascript/relatedpost.js' type='text/javascript'/>

NB : Ganti link warna merah dengan url icon anda.

6. Kemudian Cari kode dibawah ini.

<div class='post-footer-line post-footer-line-3'/>

</div>

</div>

</div>

7. Copy kode dibawah ini pada </div> terakhir.

<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:loopvalues='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>

8. Terakhir jangan lupa save template anda.