How to add a Related Posts list under your blog posts




| 20 comments

In this post i will show you how to place a related posts widget under your blog posts.Displaying related posts under your blog posts is a great way to keep visitors to your blog - on your blog.The gadget works by displaying a list of posts that have the same label/labels as the post currently being viewed, so there is a good chance the visitors will also be interested in the related posts.To add the recent posts widget we must add two pieces of code to your blog.

How to add a related posts list under your blog posts

Adding Related Posts To Your Blog.

1. Click 'Layout'-->'Edit html' for your blog
(Tick the expand widget templates box)

2. Find the following piece of code in your blogs hmkl:


</head>


3. Copy and paste the code below Directly Before </head>



<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:left;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.3em;
font-weight: italic;
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:blue;
}
#related-posts a:hover{
color:red;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:10px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Hey ! Here's Some Related Posts You May Like&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->


Note: The heading is currently - 'Hey ! Here's Some Related Posts You May Like' - this can be changed as to anything you like.

Optional : Change Icon

Petrina asked in a comment can the image be changed and the answer is yes.

This is the small icon that is displayed beside every title :

How to add a related posts list under your blog posts

This is the URL of that image :

http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

Simply find that URL in the code and replace it with the URL of the image you want to use.Make sure to use a small image around 16x16 to 25x25.

--

4. Now find this piece of code in your blogs html :

<data:post.body/>


5. Copy and paste the following code Directly Below <data:post.body/>



<!-- Related Posts Code Start-->
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.spiceupyourblog.com' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End For Info: www.spiceupyourblog.com-->


We Are Nearly Finished - First A Quick Reminder:
If you need more help or have an opinion or suggestion Please leave a comment Below.
This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank.

Note: You can change the maximum amount of related posts listed its currently 6
Simply change this section above : max-results=6

Once you click save the related posts list has been added.What do you think ?


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

20 comments:

  1. I can't seem to find the in my blog. I've searched through it manually and also with the "Find" control.

    ReplyDelete
  2. Hi, Did you click the 'Expand Widget Templates' box ?

    If you did not tick the box you wont be able to find the 'data:post.body' code.

    Let me know if you can find it now, if not dont worry we will sort it out..

    Paul.

    ReplyDelete
  3. I've tried this code. I place it in the html, save the template, but nothing shows up on the blog. Are there lines in the code that need to be altered?

    ReplyDelete
  4. Hi Glen,

    You dont have to make any changes to the code with this one.
    Does the text 'Hey Heres Some Related Posts You May Like' appear ?
    I checked out your blogger profile and you have 3 blogs which one are you adding the related posts to ?

    I will take a look for you once you reply...

    Paul.

    ReplyDelete
  5. Hey, Paul! I got it working. Actually, it was working all the time. I just didn't realize it would only show up on the individual posts. But it's there now, albeit with a little tweaking. I hope you don't mind. You can find it here. Thanks for all you've done. Both the site and your tips are stupendous.

    ReplyDelete
  6. thanks for the help! It works on my blog, but how do I change the related posts links icons? thanks!

    ReplyDelete
  7. Hi petrina,

    Its actually very easy to change the image,

    Follow the steps > layout > Edit html > Expand widget templates.

    Now you need to find the image to replace, this is the image currently being used :

    http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

    Once you find that replace it with the image you want to use, remember it must be small i would think any bigger than 16x16 to 25x25 would not look right.

    Great question i will add the steps to change the image in the post, I will also add who asked the question so you will get a nice link back to Everyday Life !

    Paul.

    ReplyDelete
  8. hey! I followed all the steps, but nothing shows up - will it only show up in the future posts, and not my old ones?
    my blog is:www.stillestund.blogspot.com

    ReplyDelete
  9. Hi Sandra,

    I just checked your blog and it's working fine now, it will display on the individual post pages.

    If you need more help let me know,

    Paul.

    ReplyDelete
  10. Thank you Paul! Is there any way to post it on the "main page" as well?

    ReplyDelete
  11. This is great, thanks for sharing this tip! I love it. I customized some of it (link color, font size), it looks like the icons and the link text are not lining up, is that the icon I chose, or some setting I messed up?
    Thanks again.

    ReplyDelete
  12. Hi Tim,

    I took a look at your blog and the related post list is lined up perfectly.

    It could be browser related, im using Firefox what browser are you using ?

    Paul.

    ReplyDelete
  13. Paul, thanks for looking so fast. I was looking at it in IE, checked my Firefox and it does look better.
    I think I was being too picky, looking to line the text up centered with the icon, like each item on a bulleted list is centered on the bullet. Like I said, being too picky.
    It works great, thanks again for this tip.
    -Tim

    ReplyDelete
  14. Hi Again Tim,

    I totally understand, we work very hard on our blogs so of course we want them perfect.Your blog looks great and it reflects well on you.As your blog is about photography which is visual it's important your blog makes a good visual impression on visitors.

    I did think the images and post titles lined up perfectly maybe if you clear the cache you will see what I'm seeing.

    If you need more help just ask,

    Paul.

    ReplyDelete
  15. "Your blog looks great and it reflects well on you.As your blog is about photography which is visual it's important your blog makes a good visual impression on visitors."
    Thank you VERY much, I'm just getting started, your comment is very encouraging!

    ReplyDelete
  16. Hi Paul, its not working on m blog. I did all the steps that you have in this tutorial.

    ReplyDelete
  17. Thanks for the post.

    > If it is important why you don't use it? Can this widget turn our blog slow?

    ReplyDelete
  18. it worked for me man tanks for the info

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us