Tuesday, January 11, 2011

[Tutorial] : Related Post Widget di bawah setiap entri

Bismillahirahmanirrahim..


Dehem - dehem..


Tutorial ni dah lama nak pos tapi sebab malas pastu lupa benda ni dah berkurun kat dalam draf, terus tak buat. Sampailah encik ARC hemsem kita tanya, baru ai teringat.


Related Post Widget ni lebih kurang macam LinkWithin la jugak cuma takde gambar. Tapi bagi saya, widget ni lebih kemas berbanding LinkWithin. Nak tau macam mana nak dapatkan widget ni?


Chalo bete.


widget Related Post





1. Pegi ke Layout>Edit HTML


2. Sila backup terlebih dahulu template anda ye nanti kalau tak jadi boleh recover balik.


3. Tick kat kotak "Expand Widget Templates".


4. Cari kod </head>.


5. Masukkan kod kat bawah ni sebelum kod  tadi.



<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://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

6. Sekarang, cari kod <data:post.body/> atau kalau tak jumpa cari kod 
<div class='post-body>
atau
<data:post.body/>

7. Masukkan kod kat bawah ni dibawah kod yang kamu cari tadi.



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


8. Preview dan Save!


Source : Sini




20 comments:

  1. hah hah...
    ermm.. malas plak nak godek html lagik.. guna jer laa linkwithin.. koh koh koh

    makin lama, cipina makin selo padet blog.. apekah???

    ReplyDelete
  2. @Aujinz
    hari - hari ada saja perkara yang nak dipadet termasuklah tentang kehilangan henpon baru - baru ni tapi entahlah ojin, diri ini berasa terrrsangat - sangat malas. dilema melanda diri.

    mood : sastera

    ReplyDelete
  3. saya masih lebih suka linkwithin krn ada gambarnya :)

    ReplyDelete
  4. @r10
    suka dua - dua tp lebih kepada yang ni ehe

    ReplyDelete
  5. @Liyana Lunia.
    weuu..makasih yang! ni first time buat tutorial koding2 ni kot. gementar rasanya.

    oke. ayat TBB.

    ReplyDelete
  6. haritu ada try, rasanya macam ni lah. tapi tak jadi.. nanti try lagi

    ReplyDelete
  7. @Hasrol Nizam
    oke..kalau ikut tutorial ni kalau tak jadi gtau eh?

    ReplyDelete
  8. @Fitrihadi.com
    sy guna dua - dua hehe

    ReplyDelete
  9. Hyee! Singgah sini lepak-lepak jap tadi dan ohh polo anda!
    Heyy btw lawa blog and happy blogging! And happy new year 2011! Sempat lagi kan? :)

    Psst! : Bloggis Comel Buat Perkara Tak Patut Jangan Tiru!

    ReplyDelete
  10. @Mr. Swift
    Eksaitednya diaaa..
    Selamat tahun baru jugak :D

    ReplyDelete
  11. thanks utk tutorial ni cik fina fento..=)

    ReplyDelete
  12. @Jejaka Terhangat
    ehe..sama - sama :D

    ReplyDelete
  13. tak jadi la..kanpe tak jadi ye padahal sy da folo ap yg awk ajar

    ReplyDelete
  14. @leyzajamil
    part mana yang tak jadi tu eh? takleh save ke cmana?

    ReplyDelete
  15. thanks 4 sharing this tutorial..it works!

    ReplyDelete

Ni dah basuh kaki ke belum?

Ping your blog, website, or RSS feed for Free
MyFreeCopyright.com Registered & Protected