Memasang Related Post Dengan Icon Di Blogger.

Sahabat kucoba, 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 tahun yang lalu kang salman pernah mengulas tutorial ini serupa, dan ini yang kali ke 3 mudah-mudahan akan lebih mudah dari versi-versi sebelumnya :

1. Cara Memasang Artikel Berkaitan di Bawah Posting
2. Cara Memodifikasi Related Post / Artikel Terkait Sehingga Memiliki Fungsi Scroll  

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
1. Login Blogger > Rancangan (Design) > Edit HTML > Centang Pada Tulisan Expand Template Widget
2. 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/AVvXsEiT8jUsp8BxiynNXEoDe2olXmfLvu9opjFdSCLHDG0wRqg0kkGp9diDkrWzeSVoS4EJ2xBy2hsNsHSSxn3qh_7AZLXrD9AyR28p45IZp5O-tTgURBqApqphYLkKfDUpZybyaouWKEIyh_o/&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'/>

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

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

Lihat Juga:

• Cara Menambahkan Rating Pada Postingan Blog
• Cara Menghilangkan Widget di Artikel/Halaman Tertentu
• Cara Menulis Kode Java Script Di Postingan
• Cara Pasang Icon di Samping Judul Postingan
• Cara Pasang Web Translator di Blog    

Source kode : belajarngeblog.com

Jangan asal copy paste! baca aturannya disini
Post By Kang Salman
www.kucoba.com