Adding Related Posts Below Blog Posts In Blogger

How about adding Related Posts below your blog posts? Advantage of adding Related Posts below your blog post is that your readers may find some of your Related Posts interesting and click on the link to read the post, thus your readers stay time on your blog increases and thereby increases your pageviews. So this tutorial will help you to add Related Posts below your blog posts.

Steps Of  Adding Related Posts Below Blog Posts In Blogger:--

1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.


3--> Check Expand Template.

4--> Ctrl + F and find </head>

5--> Above </head> , Copy and Paste the codes given below:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js'
type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>

7--> Above  <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
     <!-- Related Posts with Thumbnails Code Start--> 
     <div id='related-posts'> 
     <b:loop values='data:post.labels' var='label'> 
     <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_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> 
     <script type='text/javascript'> 
     var currentposturl=&quot;<data:post.url/>&quot;; 
     var maxresults=8; 
     var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;; 
     removeRelatedDuplicates_thumbs(); 
     printRelatedLabels_thumbs(); 
     </script> 
     </div><div style='clear:both'/> 
     </b:if> 
     <!-- Related Posts with Thumbnails Code End-->

8--> Save your Template and Done.






12 comments:

  1. thnk you sooooooooooooooooo much!!!!!! It worked perfectly nd is super easy to do!! :)

    ReplyDelete
  2. hi, it is not working for me... when you say to place the codes "above" something, do you mean to place it on an empty line of the html above the < / head > , or after whatever is on the line right before the < / head > ? please help!

    ReplyDelete
    Replies
    1. paste the codes given in step5 right before the < /head > tag.
      and paste the codes given in step7 right before the < div class='post-footer-line post-footer-line-1' > tag.

      For any further help plz comment here.

      Delete
    2. i can't find < div class='post-footer-line post-footer-line-1' > anywhere, i don't know why because when i was trying to do this the other day i could find it.. i'll try to figure it out, thanks for the help!

      Delete
    3. 100% working . thank . http://www.k2blog.biz

      Delete
  3. thank . visit my blog http://www.k2blog.biz

    ReplyDelete
  4. it doesn't work for me :( I can't find the div class='post-footer-line post-footer-line-1'

    ReplyDelete