Add related posts to single post only on Blogger (hide on homepage)

I’ve had quite a few requests since my previous post listing the Alternatives to nRelate Related Posts for a tutorial on how to remove related posts from the homepage and only have them displayed on posts pages.

This quick tutorial will show you how. I’ll be using Engageya but this will work for Linkwithin and most related post plugins.

How to remove related posts on homepage

1. On Engageya, create a new widget. Name your widget and select your preferences. Select the Blogger platform. You can also do this manually by choosing any platform. Click Add Widget.

2. If you’ve selected the Blogger Platform, it will load the add widget screen. Select the blog you want to place the widget on. Click the arrow to expand the Edit Template Box. Replace the code shown

<b:includable id="main"><data:content /></b:includable>

with the following

<b:includable id="main"><b:if cond='data:blog.pageType == "item"'><data:content /></b:if></b:includable>

and select Add Widget. The related posts will now only show on each posts and not on the homepage. Related Posts usually take some time to appear so check back in 30mins or so.

hide related posts on homepage on blogger

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up youโ€™ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

32 responses to “Add related posts to single post only on Blogger (hide on homepage)”

  1. Thank you so much! I have been waiting for this tutorial and will try it soon. Your tutorials are the best.

    Greetings,
    Maarja

  2. Thank you for this tutorial – it was very helpful! I am wondering if you know how to edit Engageya’s CSS, for example how to remove the logo in the bottom right corner. Any help would be much appreciated!

    Tasha

    1. Hey Tasha, you can add #git_wrapper_0 .post_here a {display: none;} to the CSS.

      1. Mylรจne

        Hello Elaine, and first of all, thank you so much for all of your precious help ! I’m so glad that I came across your website. I was wondering if you could point out to me where to find the css area for the engageya pluggin in my blogger html code ? I have no idea where to insert that line of code you gave to Tasha… Thanks in advance ! ๐Ÿ™‚

        1. Hello, you just add it to your normal CSS area above ]]> </b:skin> ๐Ÿ™‚

  3. good evening how do i remove the nrealted from blog in blogger

    1. Hello. Go to Layout and remove the nRelate gadget ๐Ÿ™‚

  4. Thank you so much for this! The Engageya widget looked so messy on my home page and I only wanted to use it on each post page. Thanks to your very clear and easy tutorial I have achieved this. Now my only problem is to find out why under most posts Engageya pulls only one related post.
    Best wishes,

    Rossi

    1. Hello Rossi, it might be showing one post to just you. Engageya can show posts that haven’t been visited by you previously, have a look at your blog on a different browser or clear your cache and check it ๐Ÿ™‚

  5. Thank you I have removed the Engageya post from my home page. I have a question about the general blog comments? Do you think that not using the Google commenting system will effect our google blog rankings? I’m also wondering since you don’t use the Google commenting system, does your comments show up in your Google+ feed?

    1. Hello Lily. No it won’t affect rankings and not using Google Plus comments means comments don’t show on Google Plus. I have a post about Comment Systems here, you may also find this post interesting about how Google dropped Authorship.

  6. What a great tutorial! I’m wondering if you might be able to help…Engageya pulls Facebook posts as well? I don’t understand why and it drives me crazy ๐Ÿ™

    Thank you,
    Dash xx

    1. Hey, thank you. When you’re creating a new engagya widget there’s a section for promoting your Facebook page. If you put in your URL then they’ll include FB posts so that would be why. You should be able to turn it off in the widget settings ๐Ÿ™‚

  7. ALadyInwhite

    Hi,

    I installed the widget on my blog however I’m not too happy about the thumbnail size. I’m aware there are larger sizes available however their styling isn’t ‘in-tune’ with my blog and it would look peculiar. I was hoping there’s a magic CSS trick I could employ to change the image size without changing the style of widget.

    P.S.
    I’ve only just discovered your website a few days ago, and my blog has had a complete face lift. All due credit is to you and your clear tutorials. And it’s so endearing to see how you manage your comments and reply to as many as possible. Thank you in advance.

    Iram

    1. Hello, thank you so much. So glad you like the blog and I appreciate your nice comments! Changing the image size via CSS will cause them to become blurry as it would be stretching the original size set in the HTML rather than altering it.

  8. Hello, thank you so much for all the coding you provide, it`s been an amazing help!!

    Just one thing – I installed this widget to my new blog and when shown it shows related posts but not with my pictures – with other pictures I do not have on my page?

    Could you help please? Thank you so much!

    1. Hello Natรกlie, thank you. So glad you find it helpful. Unfortunetely I can’t help with this, it’s to do with Engagya. The thumbnail images will usually show properly once your RSS Feed has been synced fully.

  9. Thank you for the code. I’m now trying to move the related posts from Engagya after my labels but before the comments section. Can you please help?

    Thanks

    1. When creating the widget select “Javascript Any Platform” instead of “Blogger”. Then you can add that code to the section you want the related posts to appear.

  10. Thank you a lot! This post was really helpful!! ^.^

  11. Hello, Elaine! Your site is wonderful and I really learned a lot with your articles.
    Do you kwnow how to move Engaeya’s widget inside the blog? I’d like to put it below post footer and I can’t find a way – it appears automatically above post footer.

    1. Hello, select “Javascript Any Platform” instead of Blogger, then you can use the code where you want it to appear ๐Ÿ™‚

      1. Thank you! It worked! ๐Ÿ™‚

  12. thank you SO much – I finally have this installed on my blog (the linkwithin one wouldn’t work) and I changed the coding so it only shows on my posts – I am extremely happy – you are wonderful!

    1. Awh thank you Leanne, so glad it worked so well for you ๐Ÿ™‚

  13. Thank you so much – this was a fab tutorial, so simple (and I took your recommendation for Engageya as well, as I’ve just removed Linkwithin to try and shift it’s placement but then couldn’t re-install). I am super happy to only have the post recommendations ON THE POSTS (not the home page). You are very clever!

    P.S. is your blog on blogger or WordPress? you have great advice re: Blogger but your fonts and comment system don’t look like any I’ve seen on Blogger blogs. I’m intrigued if you ARE on blogger = I love your design!

    1. Hello, so glad you found this helpful! This blog is self hosted WordPress, but I also have a Blogger blog. A similar design can be achieved on it. The fonts are custom and from Google Fonts, here is a tutorial showing how to install them on Blogger.

      1. iteacertified

        THANKS Your tutorial was very helpful

  14. Will this also work with intense debates? My comment system is all messed up on my home page and I am at lost what to do short of removing intense and losing a lot of comments. Sigh

    1. Oh wow, I’ve never seen that before. They aren’t supposed to appear on the homepage. I think you’d be better off re-installing.

  15. iteacertified

    How can i make the engageya related post appear in mobile site, Please help

    1. Set the mobile template to custom, find the Engageya widget in your template (Template > Edit HTML) and after type='HTML' add a space and then mobile='yes'