Cara Membuat Related Post Dengan Icon

Cara Membuat Related Post Dengan IconSahabat 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;http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png&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..
Dapatkan update artikel terbaru kami langsung ke email anda

3 Responses to "Cara Membuat Related Post Dengan Icon"

vina said...

makasih infonya...

mau blog anda jadi mesin pencari uang..
kunjungi blog ku . tips supaya blog anda menjadi mesin pengumpul uang

Khasan Nova P. said...

wah, sangat menarik pasti blognya,
kapan-kapan saya pasti berkunjung kesana
:D

Bang Zendy said...

gak mau gan yang kluar 3 kode saya yang kedua diwahnya gak ma
:j:

Post a Comment

pasang iklan murah