Thursday, August 24, 2006

How to have PREVIOUS and NEXT links on your posts

Update: Blogger now automatically adds [OLDER POSTS] [HOME] [NEWER POSTS] at the bottom of the page and the method described in this post which is difficult to implement is no longer necessary so thank your lucky star.

I heard they were going to implement PREVIOUS POST and NEXT POST feature for the newly rolled out Blogger Beta, but looks like that is not the case. However, if you want this feature for your blog, you can still do it manually as follows (this will be for both Blogger classic as well as Blogger Beta).

To do this, add this table code at the bottom of your post:

<table border="1"><tr><td><a href="url of newer post">NEWER POSTnon-breaking spacenon-breaking spacenon-breaking space</a></td><td><a href="url of older post"> OLDER POST</a></td></tr></table>

(Note: the characters non-breaking space is an image, and cannot be copy-posted, You will have to manually type the characters)
Go to the newer post and get the url of that post from the address bar (permalink) and replace "url of newer post with that url and publish the post. Similarly, do that for the older post. This will have to be done for every post on which you want that feature.

If you want to simplify the process, sign into Dashboard, select the blog, click SETTINGS > FORMATTING, then somewhere at the bottom of the page, in the POST TEMPLATE box, paste in this HTML code in that box.

<table border="1"><so&l;tnbr><td><a href="URL of newer post">NEWER POST non-breaking spacenon-breaking spacenon-breaking space</a></td><td><a href="URL of Older Post">OLDER POST</a></td></tr></table>


Save and republish. Then each time you do a post, that code will appear at the bottom of the post, and all you have to do is to get the url of the previous post and next post and paste it in the appropriate place.

UPDATE 24 August, 2006: This will result in the link appearing as PREVIOUS POSTNEXT POST with no space between the two links. If you want some space between the links, you will need to add some special characters for non-breaking space non-breaking space after PREVIOUS in the HTML code. If the space between PREVIOUS POST and NEXT POST is not enough, all you have to do is to add more non-breaking space
So your HTML will appear like this, for example:

<table><tr><td><a href="url of previous post">PREVIOUS POSTnon-breaking spacenon-breaking spacenon-breaking space</a></td><td><a href="url of next post">NEXT POST</a></td></tr></table>


Note: Please do not try to copy and paste the above codes because the special characters non-breaking spacenon-breaking space is an image as if I try to type the characters in the post, it will just be displayed as an empty space, and if you try to copy and paste the codes you will get in the pasted codes a HTML for an image instead. You have to manually type it in yourself.

Update: See John's comment in the Comments section for other more complicated method of doing this, which will involve tampering with the template. Haven't had time to test it out yet. When I do, I'll do an update on this post.

NEWER POST    OLDER POST

36 comments:

  1. The next & previous post links in beta are on the post pages, after the comments and such. The links are labelled "newer" & "older" post. See this post on FreshblogBeta, way down at the bottom of the main frame.

    For alternative ways to do this on Blogger, including Greg Hill's Blog Navigator and Ecmanaut's next & previous date links check out the navigation category on the Blogger Hacks Wiki.

    ReplyDelete
  2. I don't understand why the table tag is necessary for the links - they're on a single line.

    ReplyDelete
  3. I don't understand why the table tag is necessary for the links - they're on a single line.

    ReplyDelete
  4. Hi John,

    Thanks for the information. I will modify the post accordingly.

    ReplyDelete
  5. Hi Guitar Geek,

    By single line, I don't know if you mean that by using the codes in the beginning of the post, you get a kind of merged links, which looks like one link like PREVIOUS POST>NEXT POST. Lower down the post, I explained how to get some space between the two links.

    If you mean you want the PREVIOUS POST and NEXT POST to appear on different line. You will have to do it without using the HTML codes for the table and introduce a <br /> tag between them. If this is what you mean, maybe I'll add an update to the post, but I really don't know why that is necessary.

    ReplyDelete
  6. I prefer a 'pipe' character between links:

    PREVIOUS POST | NEXT POST

    ReplyDelete
  7. If you like that, just use this code:

    <a href="">Newer Post</a>|<a href="">Older post</a>

    ReplyDelete
  8. Anonymous1/05/2007

    How could I have the title of the two posts (prev and next) instead of "previous|next"?

    ReplyDelete
  9. You can manually substitute the "previous" with the actual title of the post, etc., but it will involove a lot of work.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  10. I´m not "afraid" of the work it will involve. :-) I just don´t know where the title is stored. What I have now is "newerpagetitle", and "olderpagetitlte" but it does not show the title of the post. Is it really that difficult? Thanks a lot.

    ReplyDelete
  11. Hi Leicca,

    I don't mind answering your question, but you got to realise that Blogger has now the new Blogger, and unless you want to continue with the old template, this may be only a temporary thing. But in any case, by answering your question, you and others will learn something, plus you said you are not afraid of the "extra" work. I will answer your question with a new post, and I think it may not be a waste of time because there may be some people who may want to stick to the old (classic) template as it allow those with a little bit of HTML knowledge more control over how they want their blog's "look and feel".

    I will post here a link to the post when it is ready.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  12. I knew how to change a couple of things in my old template, but, as you said, I need "extra work" with the new one.

    Thank you very much for your answers and your help. I´ll wait for your post.

    ReplyDelete
  13. I have put up a new post which can do what you want done at Newer Post Title, Home and Older Post Title links under each post. If you have futher questions, feel free to comment somemore.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  14. Hi! I have a problem.

    When i click on "comments" of this post, for example, i go to link: https://www.blogger.com/comment.g?blogID=26880688&postID=115639769885045151

    How can i do to go on: http://blogger-tricks.blogspot.com/2006/09/editing-or-creating-link-list-in-blog.html

    It's possible?

    Thank you for help.

    ReplyDelete
  15. Hi Peter. I have a problem.

    When i click on "comments" of this post, for example, i go to: https://www.blogger.com/comment.g?blogID=26880688&postID=115639769885045151

    How can i do to go on: http://blogger-tricks.blogspot.com/2006/09/editing-or-creating-link-list-in-blog.html

    Tanks for help and sorry for my bad english! :)

    ReplyDelete
  16. Hi Salvatore,

    If the intention of leaving a comment in this post
    https://www.blogger.com/comment.g?
    blogID=26880688&postID=115639769885045151

    is where you are supposed to go. Why would you want to go to
    http://blogger-tricks.blogspot.com/2006/09/
    editing-or-creating-link-list-in-blog.html

    which is another post? I don't understand.

    BTW the unclickable URL you have left in the comment are long unbroken lines, and may cause problems like the lines extending into the right sidebar or cause the sidebar to be pushed to the bottom of the page.

    I am sorry I am forced to delete your comment. Actually, you can make the URL a clickable link using <a href="URL"....
    if you don't know this already. If you had done this, the problem would not occur. Alternatively, you could have broken up the URL into separate lines like I have above.


    To learn more about making How to make clickable links.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  17. Hi Peter.
    Thank you for your answer.
    I try to explain myself.
    I want that when someone clicks on the comments of a post, the opening page is the same it opens when he click on title of the post, because the comments are best readable in the page that appear when i click on the title of the post. If someone wants to leave a comment, he can do it anyway on page bottom.

    ReplyDelete
  18. Hi Salvatore,

    Still not sure what you want, but perhaps setting the comment to open in a pop-up will get what you want. When the comment box pop-upped, you will be able to see the comment box simultaneously with the post itself.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  19. Hmm....the previous and next links on each post are OK....but is there a way to put a "previous posts" button at the bottom of your page? I have(I think)5 posts per page or something...and I'd like to be able to access previous posts without having to access the monthly archives.

    ReplyDelete
  20. Hi J's Mama,

    Sorry tried to answer but comment section wouldn't allow me to display what I need to display. Essential, just add more column in your table. If not clear, comment again and I will try to find time to answer in a new post.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  21. hi there

    did anyone every figure out how to add the next and previous links to the bottom of the blog page ??? if so can you pls tell me how to do it. ive been trying to figure it out for a while now and no one seems to give a direct answer.??

    i figured blogger would have this basic feature as all the other blog providers (?) have this on theirs.

    thanks in advance.

    ReplyDelete
  22. Hi Coat of Arms,

    New Blogger have [Newer Post] [Home] [Older Post] at the bottom of individual post page (permalink) like this one: Natural Remedy for flu and sore throat and [Older post] at the bottom of the main (home or index) page like this one: Health is Wealth.

    You don't have to do anything. Is that what you want?

    Peter (Blog*Star)
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  23. Hi Peter.
    I wonder if you know how to hide the "NewerPosts, OlderPosts and Home" button from appearing at the bottom of my page jendelaorder.blogspot.com.The reason I want to do this is because I don't want people to read the whole contents in one page.I'm linking to each post in this page separately.

    ReplyDelete
  24. Selamat hari Rohaida,

    Re your request it is very unusual as we used to get the opposite requests when "previous" and "next" was not available and we have to give a manual method (hard work). Yours if the first request, but probably can be done. I have no time to try to find out why. Suggest you send your request to Google official Blogger Help group where there are Blogger Employees and other Blog*Stars

    I hope that if you found out how to do it, you let us have some feedback as we are here to help each other.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  25. Hi Peter,
    I have found the answer to my previous question on hiding/deleating Newer, Older and Home links. To bloggers who need a guide, please visit here

    Peter, I have another problem that need your assistance. I can't change my header background. I managed uploading the image at configure Header window but it didn't show up at the preview. I tried several method that I think might overcome the failure e.g clearing cookies and offline files, several times uploading the image, but it still didn't help. I really appreciate if you can help me figure out what was causing the failure. Thanks.

    ReplyDelete
  26. Selamat hari Rohaida,

    Maybe you can try other ways of putting a graphic header. See if these helps:

    Graphics in blog Header

    Peter the only Malaysian Blog*Star
    Guide to Malaysia

    ReplyDelete
  27. Hi Peter,
    Can i know how do I have :
    [Newer Post] [Home] [Older Post] at the bottom of my blog?? As in at the bottom of my blog website (not below each post).
    Thx.

    ReplyDelete
  28. "As in at the bottom of my blog website (not below each post)."

    You mean at the bottom of the Homepage. A blog Homepage is set to display the newest posts, so there is no NEWEST, but there will be an OLDER at the bottom and HOME is what you called "my blog website" so there is no point putting a HOME link there when you are already there.

    All this is done automatically for you, but if you insists on having NEW HOME OLD than you will have to follow the steps described in this post.

    ReplyDelete
  29. Yes,I meant at the bottom of the Homepage. If I do not put the HOME and NEWEST, will it automatically appear when i'm in the older posts homepage??
    I'm using templates from blogskins.com, so there is no such function for it unless i edit them myself. But i don't really know how can i do it.
    So, do you mean i just have to follow the steps in this post??
    Thx.

    ReplyDelete
  30. If http://insanitydebbie.blogspot.com/ is your blog, then the webpage that you get when you click the above is the HOMEPAGE. It may be profitable to read Homepage, archives, permalink, label page to the various pages in your blog.

    http://insanitydebbie.blogspot.com/ don't seem to have a OLDER POST at the bottom so may have been disabled in the template you use.

    ReplyDelete
  31. Okay,thanks.
    The template used in my blog did not have the code for those functions. That is why i needed help to have them.
    Anyway, thanks again!

    ReplyDelete
  32. I'm not sure if I'm in the right place for the specific question I'm about the ask.
    Like others i'm looking for the "previous and next" codes for my classic tamplate. However, I want it on the bottom of each page on my blog, not on each post like everyone seems to be talking about here. For example. Go to my blog..
    http://prettybeautifulblogs.blogspot.com/

    scroll all the way down, and you won't see option to go to the next page. This is what i'm looking to add.
    I tired adding the code you specified, but all i got were the phsysical images but not the link to enable you to actually visit the next or previous previous.
    Thank you very much.

    ReplyDelete
  33. I have tried your code and I thinks it is not good enough for blog sopt because when I put this code it still show the old post. I want to use the next and previous I mean when I click next link it not show the old post bellows the next and previous links. can you help me to do this? Many thanks.

    ReplyDelete
  34. This is an old post and Blogger has improved and at the bottom of the page will have links to get to
    [NEWER POSTS]
    [HOME]
    [OLDER POSTS]

    You can confirm it by scrolling to the bottom of this post.

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. hey dude i want next and previous to my photo blog..can you help me?

    Funniest Meme Pinoy Version

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics