How To Create Blogspot Related Posts Below Post

Related post can be regarded as a simple thing, but has the good effect for our blog. With related post, we can increase our blog's pageview. And can also helping our readers to find another interesting posts related to the one they are reading. To create a related post, you can follow the tutorials written on this.

So have your blog installed this wonderful feature? If it has not yet, then you get one! By simply follow the guide here.

How to create related posts in Blogspot Blog

Step 1. Now login to your Blogger.com.

Step 2. Now go to Edit HTML from Template.

Step 3. Now find the code then past the following code before the .

<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 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Step 4. Now find this code Cari kode <data:post.body/> use CTRL+F to find it. Once you find the code then paste the following code right below this code <data:post.body/>.

<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>

Step 5. Step Now save the template.

The related post will appear like this right below after your post.

Note
► To display as many related posts as you like just change the number in blue color into the number of your wish.
► To change the icon beside the related post, you have to change the picture URL (in the red color) into the picture you like. You can create your own icon then upload it online to get the URL picture.
► To change the color or hover style (the hover color appears on the related post when pointed by the mouse) then you can modify the CSS code, like in the below.

#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

If you prefer to have something more interesting, I think you should install related post with thumbnails for your Blog.

It's pretty easy, to create Blogspot related post, right?