Releated Post Dengan Icon

Selamat Pagi sahabat semua. Sebelumnya saya ucapkan SELAMAT TAHUN BARU 2013. Pada kesempatan yang sangat berharga ini saya akan share mengenai cara membuat widget releated post dengan icon.Sebenarnya tutor ini sudah banyak sekali para bloger-bloger hebat membahasnya,tapi tidak ada salahnya saya membahas kembali untuk sekedar share atau berbagi tips dan trik blogspot.
Berikut ini screentshot nya:

Oke langsung saja kita mulai deh....
1. Seperti biasa, kalian harus login dulu ke akun blogger
2. Kemudian masuk ke rancangan lalu Edit HTML
3. Jangan lupa Expand Template Widget
4. Biasakan back up temnplate dulu ya
5. Kemudian pasang kode berikut di bawah tag < / 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLnctRWrBmrrZktZXSEBLBtnGT0xATWX2scivOVUvdgQ1023sC6021j0KSYINJ0c_aM-I6fvbSc5EIPi6tiqdMmmvW6rWsVEuMDBaJtPci3K5jvCnNRrEtwavwb4W5s2uz-q7BlXtfcs/") 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://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

6. Jika sudah, cari < data:post.body/ > lalu pasang kode berikut di bawahnya

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

7. Dan yang terakhir tentu saja save template dan lihat hasilnya