Welcome to Spider Share Blog

Selamat datang di Spider Share Blog.
Blog ini akan segera berpindah ke
Mohon kunjungannya ke blog saya yang baru. Dan Jangn lupa di-follow ya.. :)

Hermawan Abdillah

Headlines

Spider Share dot Info

↑ Grab this Headline Animator

Saturday, January 14, 2012

Membuat Related Post / Artikel Terkait yang Menarik di Blog

5 comments
Nah, dalam kesempatan ini saya akan mengulas sedikit mengenai Cara Membuat Related Post / Artikel Terkait yang Menarik di Blog.

Related post atau artikel terkait digunakan untuk mempermudah visitor atau pengunjung blog melihat postingan-postingan yang berhubungan dengan artikel yang dibacanya tersebut.

Cara kerja related post ini yaitu dengan mencari postingan-postingan yang mempunyai label/kategori yang sama. Oleh sebab itu teman-teman dalam posting sesuatu di blog harus menggunakan label.


Oke, langsung aja, Sekarang kita ingin membuat related post seperti gambar di bawah ini.



Untuk membuatnya, langkah-langkah yang harus dilakukan adalah :

  • Login ke Blogger
  • Pilih Edit HTML, lalu berikan tanda centang pada expand widget templates
  • Nah,setelah itu cari kode </head>(Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:


<style> #related-posts { float : left; width : 540px; 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("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") 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://spider-share-related-post.googlecode.com/files/spidershare_related_post.js' type='text/javascript'/>

  • Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

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

  • Kemudian simpan
  • Selesai

Setelah membaca, Mohon Post-kan komentar
Terima Kasih
Yang lainnya :



5 Responses so far

    Muh Faisal said...

    thank informasinya sob

    rigen said...

    nice share sob.. :)
    komen backk.. :)

    Arimurti said...

    Terimakasih atas Infonya....akan saya pakai cara kmu,,,,

    Share With Agung Talaga said...

    Saya copy aja dulu kodenya sob ya nanti aku cobain pada blogq yg lain and makasih juga atas informasi ini. Walau mungkin informasi sdh lama di pyblish, tapi akan baru bagi saya yg baru belajar ini. salam kenal ya....

    Yousake NKRI said...

    mampir ke blog sobat, sambil baca artikel yg bagus ^_^

Leave a Reply

Sahabat

My Community

logo htc Kaskus Blogger Community bloggersumut.net

Statistik Blog

SEO Stats powered by MyPagerank.Net