Related Posts Under Post

by Zoul on 20 March 2009

Tutorial kali ni permintaan yang aku dapat dari Intan yang di email dan bertanyakan tentang bagaimana memasang related posts sebagaimana yang terdapat di dalam blog ini. Aku rasa semua tahu kegunaan related posts ini yang mana ia banyak membantu pembaca terutamanya yang telah ketinggalan beberapa post.

Biasanya related post {post berkaitan} akan memaparkan tajuk yang sama label dengan post yang sedang dibaca.

Ini contoh related post yang ada di dalam blog cuiit




















Seperti biasa sebelum anda membuat sebarang perubahan pada template code, seelok-eloknya savekan atau download terlebih dahulu template anda. Ini sebagai back-up jika berlaku sebarang perkara yang tidak diingini.

Baik.. begini caranya untuk membuat related posts di bawah post anda.

1-Login ke Blogger --> Layout --> Edit HTML --> Tanda Centang {klik} .
2-Cari kod </head> {Bagi pengguna firefox gunakan Ctrl dan F untuk tujuan mencari}
3-Letakkan kod ini di atas kod </head> 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 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://i430.photobucket.com/albums/qq22/cuitnazz/weed-bullet.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://www.geocities.com/cuitnazz/Related_posts_hack2.js' type='text/javascript'/>

Nota: Sila upload gambar di http://i430.photobucket.com/albums/qq22/cuitnazz/weed-bullet.gif di atas ke photobucket atau imageshack anda sendiri bagi mengelakkan bandwidth terlebih limit.

4-Kemudian cari pula kod ini <data:post.body/> kalau tiada, cari kod ini
<p><data:post.body></p>

5-Letakkan kod yang ini di bawah kod <data:post.body/> atau
<p><data:post.body></p> tadi

Ini kodnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

6-Sekarang save kan template anda. Related posts tadi tidak akan keluar dihalaman utama.

Note: Jika cara ini menyebabkan loading blog anda jadi lambat sila maklumkan aku akan beri satu lagi related post yang agak ringan dan tanpa eksesori.

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

Chekgu BaniHassim said...

ko rajin ek nazz buat tutorial segala nih...
bagus2...saling bagi manfaat pada yg memerlukan...

paan said...

terima kasih banyak-banyak...ko buat sendiri ke hack nie ?? belajar javascript ke ??

KhairiL's said...

wahh
dah terer buat tutorial plk...
bgs la mcm tu

Jaws said...

dan, ni juga aku rasa wp takleh wat..
hanya utk blogspot jer..
hehe..

cuit said...

Chekgu BaniHassim

Sebab ramai yang bertanya la bro.. kekadang tu siap email lagi.. Ada lagi satu yang diorang selalu tanya.. macamana nak edit template sebab diorang selalu tengok aku tukar template.. nantilah aku buat tutorialnya..

cuit said...

paan

Tak la javascript, ni sikit-sikit jer yg aku tau sebab aku langsung tak belajar ni.. sekarang ni tengah rajin belajar dari tutorial online jer..

cuit said...

khairil's

Mekasih.. bukan pandai pun.. sebenarnya sebelum aku bukak cuiit ni aku dah bermain dengan blogger template dan template hack ni dah lebih dari 5 tahun {sori ya terbelagak pulak}.. jadi kalau ada yang bertanya insyaallah kalau aku tahu aku akan jawab..

cuit said...

Tuan Jaws

Related post untuk WP kalau tak silap aku dah ada plugin dia sendiri kan.. he he

Monkey D Luffy said...

mungkin aku nak cuba yg ni

cuit said...

Monkey D Luffy

Silakan tuan.. kalau tak leh beritau yek

KhairiL's said...

aku try nak letak benda ni
tp malangnya aku gagal sbb
data:post.body
aku dah ganti masa nak guna auto read more...


ade cara laen x

Post a Comment