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(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/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


{ 45 comments.. read them below or add one }

Armyrule Armyrule 6:57 PM
trimas ar sbb buat tutor pasal ni...aku mmg dah lama nak buat tp malas nak search sendiri...hahaha
Legasi Piston Pecah Legasi Piston Pecah 12:47 PM
okie dokie..thanks...nk tanye lagi...kalau linkwithin buat secara tulisan saja tak perlu ada gambar camne ek?
Nescafe ais Nescafe ais 12:56 PM
@ 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.
Ahmad Syazwan B. Ahmad Tarmizi Ahmad Syazwan B. Ahmad Tarmizi 9:27 PM
Thanks..
camna nak buat recent post yang gerak2 tu?
macam sebelum ni nesface buat.
wallpaper wallpaper 3:40 PM
dh buat tutorial ni..tp x kuar pun..xde error masa nk save..
Eda Eda 3:41 PM
This comment has been removed by the author.
heatzik heatzik 7:02 PM
wargh!!inilah yang dicari-cari selama ini!
Iza Iza 11:21 AM
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?
nuhan nuhan 4:41 PM
dh try tutorial ni tapi xkuar apa2 pon..huhu~
worldpure(dot)com worldpure(dot)com 5:24 PM
ermm..sy pun mengalami problem yg same mcm Iza...adeh!
Sakira Sakira 9:39 AM
Hey, thanx for sharing this !
It worked fine with me.
Saya ada tukar-tukar certain something though.

Thanx once again for sharing this ! :)
The Notes Web The Notes Web 3:58 PM
Beda-beda ya caranya pasang related post itu. Aku juga nemuin yang cuma satu langkah, meskipun kurang memuaskan.
mrkazen mrkazen 7:00 PM
xjadi laaa bro byk kali try
IKRAM IKRAM 2:01 AM
salam nes . ni nak buat reply comment ada gambar tu x bley la . kalau code <dd class=comment-footer ngn code <data:commentpostbymsg/> xda nak parking kat ne ea? Ni nak buat related post code head ada . Yang lg 1 tu xda
admin admin 9:07 PM
herm, xde ape2 pon yg tjadi... error xde tpi xkuar ape2 pon bwah post T.T
syafiqah_kakram syafiqah_kakram 7:16 AM
mcm mana nk masukkan post dlm related post tu???
mefranz mefranz 7:25 PM
terimas tutorial.berjaya dah
Nordin Nordin 7:53 PM
dah wat tapi x jd pun.. xde ape2 perubahan pun...
mcm mana ni?
suhailas suhailas 2:13 PM
haaaa byk kali dah cuba,xjadi pon...
haszuraidah ishak haszuraidah ishak 2:27 AM
@Nescafe ais

nak tny, nape bro kata klu guna linkwithin, dia tak bagi backlink ek..tp klu guna related post kat atas ni, dia backlink ek..
haszuraidah ishak haszuraidah ishak 1:36 AM
huhuhu..tak kuar jugak..baru je nak berubah kepada related post ni..takmo guna linkwithin..
wan muhamad wan muhamad 1:31 AM
Aku pun dah buat tapi x jadi jugak x de error pun..aku rasa templat kena tkar mungkin sesetengah templat x sesuai benda nie..kpd yg x jadi bleh cuba recent posts hampir sama mcm nie ada gambar jgk leh tgok kat blog aku
noni noni 4:48 PM
salam..selalunya bila dah edit & paste,entry tu akan ada double.maca mana ye
ikhwan idris ikhwan idris 2:19 PM
erm... mcm mane nak buat recent post untuk setiap post?? yg ade thumbnails skali.. byk kali cari, cuba x dapat2 jugak ..
sayalah shelly sayalah shelly 11:07 AM
best best..hehe..suke
JuJie JuJie 7:43 AM
Heran weyh..mane la yg x kena ni.. x jadi jadi..huhu
kencew blog kencew blog 6:52 PM
kaka bagai mana cara membuat Latest Tweets seperti tertera pada kanan atas blog anda..
mohon bantuannya kaka..
makasih...
^_^
kencew-unix kencew-unix 6:56 PM
kaka bagai mana cara membuat Latest Tweets seperti tertera pada kanan atas blog anda..
mohon bantuannya kaka..
mohon dikirim ke e-mail saya kaka
[email protected]
makasih kaka...
^_^
electronic for all electronic for all 6:21 PM
Ok... kene try ni code, moga berjaya.....
Berita Super Junior Berita Super Junior 10:30 AM
Terima kasih banyak...sudah saya praktekan di blog saya ini..
AiTotYati AiTotYati 8:56 AM
terima kaseyh.

Ai dah berjaya buat!!
AnonymousAnonymous 2:53 AM
cane nak buat gadget yg mcm :anda juga mgkin meminati:
Tun Aidil Tun Aidil 9:13 PM
saya x de la.. cam ner
Fara Fara 11:26 PM
dh cube 5 kali..satu pon tak jadi...ade nasihat lain tak??
Danial Abdul Rahim Danial Abdul Rahim 12:08 AM
@Fara

Salam Tuan Blog, harap maaf menggangu :)

Cuba try yg ni:

Related Post Untuk Blogger
Insan Sederhana Insan Sederhana 10:30 PM
wah nice share Danial Abdul Rahim.. :)
http://inxan.blogspot.com/ :)
Ade Dwi Putra Ade Dwi Putra 4:56 PM
wah, keren artikelnya gan
bermanfaat banget
thanks dah infonya
raja taman raja taman 9:25 AM
Makasih gan atas ilmunya
ralated post fungsinya apa yaaa

http://www.tukangtamanmurah.info/
Nyz Hj Hashim Nyz Hj Hashim 8:08 PM
dah save.. xde error.. tp kenapa x appear.. ada kemungkinan template yg sy pakai skrg ni x support ke..?