Buat Pos Berkaitan (Related Post Widgets )


Widget ini akan memaparkan pos-pos dulu yang berkaitan mengikut kategori, tag dan label pada semua pos korang. Ini akan menyenangkan pelawat korang sekaligus mereka akan terus melayari blog korang lebih lama lagi.

Ok.. tanpa membuang masa jom godek..

1) Pergi Layout >Edit HTML
2) Save dulu templates asal korang(Download Full Template)


3) Klik "Expand Widget Templates"

4) Cari kod </head>

5) Kemudian paste kod di bawah betul-betul sebelum </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("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") 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.sigmirror.com/files/21737_edkth/related.js' type='text/javascript'/>


6) Kemudian cari kod <p><data:post.body/></p>

7) Paste kod di bawah betul-betul selepas <p><data:post.body/></p> 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>


Sudah siap pun.. korang boleh save dan tengok hasilnya.

p/s: korang boleh tukarkan Related posts kepada ayat koramg sendiri.

1 comments:

Post a Comment