Pasang Widget Related Post Dengan Icon

Assalamualaikum selamat siang sahabat semua. Sebelumnya saya ucapkan SELAMAT HARI RAYA IDUL FITRI 1432 H MOHON MAAF LAHIR DAN BATIN. Pada kesempatan yang sangat berharga ini saya akan memenuhi permintaan sahabat saya Hori yang meminta bagaimana cara pasang widget related post seperti milik saya. Sebenarnya widget ini sudah sangat lama ada kok dan saya kira kalian semua juga sudah pada tahu. Oh iya sebelumnya baca juga Cara membuat Artikel Terkait Dengan Gambar/Thumbnails atau Membuat Artikel Terkait Dengan Fungsi Scroll jika kalian kurang suka dengan widget ini.

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(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_CuN6QZpFDrlzjxn6qh647I3Ek3FzTvkzmWqQwLPHFJN7cCMeJlSbNQg8VcXkEju34RsB3fWEMkOhKgDU-oI_MHGwRVLRgYKyO2Fdg150K5Wgbypgr3mgPxmuaZQNOwO9CdmnldBv34E/&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://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 != &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>

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

Semoga bermanfaat
Alhamdulillah...