Add the Related Posts below your post

Add the Related Posts below your post

Want to view related post under your post?
Want to make the readers to find the related post easily?
Don't worry, here is the solution...


Step #1. First, go to 'Layout' tab and choose the Edit HTML section ( Layout>Edit HTML )


Step #2. For this step you need to backup your template (click the 'Download Full Template' to backup your template)


Step #3. To start editing your template, please click the 'Expand Widget Templates'


Step #4. Use Ctrl+F to find this </head> tag. Then paste this code just before this </head> tag:

Code: Select all

<!--syazchess related posts starts-->

<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://i625.photobucket.com/albums/tt337/syafzpic/Forum%20upload%20only/syafzpic-for.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.sigmirror.com/files/30184_hsy8j/syafzpic-related-posts.js' type='text/javascript'/>

<!--syafzpic related posts end-->

Step #5. Use the Ctrl+F to find this <data:post.body/> tag.

Step #6. Then paste this code after the <data:post.body/> tag:

Code: Select all

<!--related post start here-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>My 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=xx&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>

<!--related post end here-->

P/S:
If you found two <data:post.body/> tag, choose the second <data:post.body/> tag

Step #7. Save your template. Done!

Enjoy it!

InspiredMagz.com