Cara Membuat Related Post Dengan Icon

Cara Membuat Related Post Dengan Icon. Sahabat My Information, pernahkah kamu berpikir bagaimana cara membuat related post dengan mudah atau dengan sedikit kode? ya benar sekali pada umumnya untuk penyususan kode ini sedikit panjang sehingga sedikit membingungkan untuk kita. 1 1/2 dahulu saya pernah mengulas tutorial ini serupa, dan ini yang kali ke 3 mudah-mudahan akan lebih mudah dari versi-versi sebelumnya :

1. Cara Membuat Related Post Fungsi Scrolling
2. Cara Membuat Related Post Bergambar dan Bergerak

Dan versi sekarang adalah Memasang Related Post Dengan Icon di Blogger atau How To Related Post With Icon for Blogger dalam bahasa inggrisnya. LIHAT DEMO
Oke langsung saja kita mulai

• Login Blogger > Rancangan (Design) > Edit HTML > Centang Pada Tulisan Expand Template Widget
• 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/AVvXsEgiwGGD3l-76P2GSRdJVGfQ03fErZJnN3vmCl5V-y_Oj1QNv-seEqqqZOhASUeN0q7DMbA6t9Yge41wzqwb7A2eFF5tMekTklXN5fY_VP-874DS8fuOp4G7gJBUF2lNM8Z0k2u9Q5aKlUg/&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'/>

• Jika sudah, cari <data:post.body/> (gunakan ctrl + F) lalu pasang kode berikut di bawahnya, jika ditemukan 2 buah kode, simpan di bawah kod yang ke 2

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

• Save template dan lihatlah hasilnya

Keterangan:

• pada tulisan warna merah di atas adalah warna tulisan dari widget ini.
• pada tulisan warna orange di atas adalah warna garis 
• Silakan ubah warna tersebutd dengan warna yang cocok untuk template Anda disini

Mudah sekali bakan? Semoga Cara Memasang Related Post Dengan Icon ini bermenfaat, selamat mecoba..