Creating Related Post on Blogspot

Posted by Obay Tutorial at 10:45 AM

Related Post is something that seems simple but has a pretty good effect for our blog. Related to the Post, pageview on our blog will increase. In addition, visitors can easily explore content that exists in our blog. To how to make this related post, would have much to give tutorials and tricks for this. And one of them can be a way :

• Please go to your HTML Edit mode via the Dashboard blogger► Layout ► Edit HTML
• Tick the small box labeled 'Expand Widget Templates'
• Search tag or code  </head> and copy-paste the following code before the code </head> or right above the code </head>.

<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(&quot;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'/>

• Search code

<p><data:post.body/></p>
Each template code is different - different. Usually the code could be as follows
<div class='post-body> or <p><data:post.body/></p> 
Actually, this code could be placed on the template that you like if you understand enough about coding. For the easiest way you can use a command by pressing CTRL + F on your keyboard and enter the code to search in the box provided.

• After getting the code <p><data:post.body/></p> Copy and paste the following code just below the code.

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

•  Save your Template

Related Post you will look like the following picture.

 NOTE :
►To display the related post links as much as possible replace the number of blue above with yours.
►To change the icon on the left side link related post, you must replace the URL code red image with the image URL that you want. You can use the site free image hosting services provider like PhotoBucket and ImageShack or bloggers themselves here.
►To change the color or style hover (color or style that emerged in the related post when highlighted by the mouse) you can fiddle - tweaking his css code. Precisely in the code.
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

If want to change the color, you just change the code
#E2EBF8
the HTML color code that you want.