Slider

[Tutorial] : Related Post Widget di bawah setiap entri

Tuesday, January 11, 2011

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYShB5X3bg9NOjYReIyOb9z3QEynI4rrTEIEz4bJg8zz7RIZJSjINhVBALgPstsVKWSDr_9sGUwV8bDY4hz5_mFhGx1zZBHFvpbJqnRI1eadJ1deZN1VeDLwvlBkZB5S1meO71Vb4CQQ/") 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




19 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. saya pun guna linkwithin.. hehe

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

    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

Meriahkan komen anda di sini

Powered by Blogger.

Pages

Theme Designed By Hello Manhattan
|

Your copyright

Your own copyright