• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Saturday, January 30, 2010

Cara pasang widget Related Posts di blogspot

Widget Related post atau entri berkaitan seperti yang boleh anda lihat pada setiap post di blog ini, adalah widget yang menyenaraikan entri atau artikel yang berkaitan mengikut kategori atau label entri atau artikel tersebut.

Untuk memasang widget Related post atau entri berkaitan, anda hanya perlu ikut beberapa langkah yang mudah di bawah.

p/s: Sila save script template sebagai backup.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada kotak Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya, taip atau paste kod </head> pada ruang Find dan tekan kekunci Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod </head> (rujuk langkah 2)

p/s: Anda boleh menukar teks Entri berkaitan yang di bold kepada teks pilihan anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqnLQRx1PTLwJbzthGNLj1azPwAcfgbG0JrYTJ3L8Un_8F397xORqtmFFGuC83_YYwpP4OfWAmsUZWfbl-PYx06hKC-_2Tby1Ip6LmNeAlh1ETXGhdnZ_0b0tiTy-hTsqx0IBYFX5K6Q/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Entri berkaitan";
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>

Langkah 4

Dengan menggunakan keyboard, tekan Ctrl+F. Kemudian, taip atau paste kod <data:post.body/> . Seterusnya tekan Enter.

Langkah 5

Salin kod berwarna merah di bawah dan paste di bawah atau selepas kod <data:post.body/> . (rujuk langkah 4)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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=15&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save

9 comments:

  1. trimas ar sbb buat tutor pasal ni...aku mmg dah lama nak buat tp malas nak search sendiri...hahaha

    ReplyDelete
  2. okie dokie..thanks...nk tanye lagi...kalau linkwithin buat secara tulisan saja tak perlu ada gambar camne ek?

    ReplyDelete
  3. @ Legasi Piston Pecah

    Kalau post tu ada gambar, memang keluar gambar pada linkwithin tu. Kalau tak nak keluar gambar, jangan letak gambar pada post. Hehe.

    Lagi satu, kalau pakai linkwithin, ada rugi sikit pada backlink.

    ReplyDelete
  4. Thanks..
    camna nak buat recent post yang gerak2 tu?
    macam sebelum ni nesface buat.

    ReplyDelete
  5. dh buat tutorial ni..tp x kuar pun..xde error masa nk save..

    ReplyDelete
  6. wargh!!inilah yang dicari-cari selama ini!

    ReplyDelete
  7. Aku dah buat ikut step di atas.....tak ada yg error tp bila buka nk tgk, tak ada apa2 yg berubah pun.....
    Sesuai ke benda ni dgn disqus?
    Sbbnya aku tak nampak apa yg jd.....
    Maksudnya x jd la tu.....
    apa yg silap ek?

    ReplyDelete
  8. dh try tutorial ni tapi xkuar apa2 pon..huhu~

    ReplyDelete