Related Posts Under Post

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} Expand Widget Templates.
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.