How To Add Related Post On Blog

Related Post is the way to increase your page Impressions, On internet many websites provide the plugin for the related post. infact, if you use that plugin it will increase you page load,alright directly to the point

• Open up blogger.com
• then Choose Design and Edit HTML
• Check on " Expand Widget Template"
• find  </head>  dan Paste above it

<!--RelatedPostsStarts-->
<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;-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out
;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out
;padding-left:15px; font-style:italic;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://2.bp.blogspot.com/-hw9HGjvn1zg/UBiERRDP5kI/AAAAAAAAAYs/O04C_mwIaJk/s1600/beating_heart.jpg) 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://zulkhamsyah.webs.com/relatedposts_forblogger.js' type='text/javascript'/><!--RelatedPostsStops-->

•  then Search Again  <data:post.body/> dan paste this code below it

<!--RELATED-POSTS-STARTS--><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><!--RELATED-POSTS-STOPS-->

you can Edit The Blue colored code with your own setting
always remember to Add label on you post
Credits to Bloggerstop.net

Like the Post? Do share with your Friends.

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Delicious
• LinkedIn
• Reddit
• Technorati

Posted in: Blog, CSS, Tips and Trick, Widget