Newer Article link, Home link, Older Article link, at bottom of every post

I did a post How to have Previous and Next links at the bottom of every posts. Actually it should be titled "How to have NEWER POST, HOME, OLDER POST links at the bottom of the post" as that is what I have decided to do for this blog.

I have decided to redo the post for the following reasons"

1. I used tables for this blog. A reader commented he didn't like tables
2. Another reader asked how she can have the title of the posts rather than NEWER POST and OLDER POST in the links. It is very hard to answer in the comments, so I promised to answer in a new post.
3. I did not describe how I easily obtained the links to put in the codes for the links.
4. old (classic) Blogger is being phased out, and is being replaced by the New Blogger (formerly beta) blogs. This will be good for those without any HTML knowledge and don't want to tangle with it. However, I am betting that there will be a few die-hards who will want to stick to the old (classic) template, as with a little HTML knowledge, it is easier to have better control over the "look and feel" of the blog. This hack, for example, will be with 2 types of links in the new Blogger. The links as a result of this hack and the NEWER POST | HOME | OLDER POST that is automatically put there by the New Blogger.

So here I am doing a new post. First, look at the result of what I will be describing in this post: The Mayo Clinic diet and the 7 rules of dieting. You will see both what we are trying to achieve in this post (at the bottom of the post) and what is put there automatically (NEWER POST | HOME | OLDER POST at the bottom of the comments (That is a New Blogger Blog). Click on the links and see how it works.

Method

If that is what you want, this is what you need to do. Sign into Dashboard, select the blog, click SETTINGS > FORMATTING, then at the bottom of the page, in the box for the Post Template, add this into the box:

<a href="Newer Article URL">Newer Article title</a>|<a href="Main page URL">Home</a>|<a href="Older Article URL">Older Article title</a>

Note that is an image, not a text, so if you are copying the codes from the box above, you will have to manually type in the character, which is the HTML for a non-breaking space to put some space between the links. Now each time you create a post, the codes will be included in your post, and you have to do is to substitute the New Article URL with the actual URL of the new article, the Main Page URL with the actual URL of your main page (this is better done in the post template, so that you don't have to do it each time you do a new post), the Older Article URL with the actual URL of the older article, and the Title of the Older Article with the actual article of the older article.

How to get the URL's and the titles

I would suggest that if you do not already have FireFox browser installed in your computer, you download it from this site: FireFox Alert or direct from this blog by clicking on the "Get FireFox with Google toolbar for better browsing" link at the top of the right sidebar. This is because FireFox has tabbed browsing and will help you greatly in this task.

Now when you modify the codes given in the above box, you will need the post URL and title. The easiest way to do this is the following. Assuming you are still in the post editor and using the FireFox browser, middle click on the EDIT POST tab at the post editor (or right-click and select "Open in New Tab"). A list of all your post will appear in the new tab in the same window. To get the URL of the relevant post, right-click on the VIEW link and select "Copy Link Location", then go back to the post editor tab, and paste the URL in the relevant place. Regarding the post article title, you can either refer to the title in the list of posts and manually type in the post title, or if you want to copy-paste, right-click on the VIEW link and choose "open in new tab", then in the new tab, just highlight the title, return to the post editor tab and paste in the post article you have copied.

Since in your previous post, you don't have a NEWER POST and likely didn't put in the link for the latest post, click EDIT POST and the list of post including your latest post will appear. Right click on the VIEW tab against your latest post, click EDIT against the previous post, then add in the link (and also add in the new title) in the post editor, then publish.

If you already have a lot of posts, and you want to do it for each post, then copy the above code, substitude the Home URL with the actual url of your main page, then copy again. This is so that you don't have to do it in each post. Click EDIT against those old posts you want to add the link, , paste the modified codes at the bottom of the post and repeat the process described above.

Now if you understand what is going on, you will be able to modify my instruction to do whatever you want done. If you still have questions, put them in the comments and I will try my best to answer.

NEWER POST

HOME

OLDER POST

Maximum width of images, scrollbox, etc that should be put in the main column of Thur's 3 column template

For those using Thur's 3 column Minima template with width modified as described in this post Blogger template tutorial: 3 column template (close new window/tab to return to this page) with the sidebars reduced from 220px to 160px. The main column remain fluid and adjust to the screen resolution of the visitors. If you post photos, scrollboxes, etc., it may appear OK in the larger screen resolution, but for those using 800x600 screen resolution, if the photo or scrollbox is too wide, it may cause the content to be pushed to the bottom of the page.

I did a test to see what is the maximum width of a scrollbox that can be posted so that will not be pushed to the bottom of the page, and it turns out that the maximum width of the scrollbox I can post so that the box will not be pushed to the bottom of the page in 800x600 screen resolution is 340px. Go to this post for example, Testing maximum width of main column in IE at 800x600 screen resolution using Thur's modified 3 column template (close new window/tab to return to this page) and typing or copy-pasting "javascript:top.resizeTo(800,600)" (minus the quotation marks) into the address bar and press the Enter key. The scroll box whould remain where should be.

Try doing the same thing at this post Width of scrollbox set at 345px using Thur's modified 3 column template (close new window/tab to return to this page) where the width of the scrollbox had been set to 345px. Notice that now, the box is pushed to the bottom of the page when the screen resolution is set to 800x600px.

NEWER POST

HOME

OLDER POST

New Blogger template or old classic template?

When bloggers upgrade their Blogger classic account to the new Blogger beta account, there is often confusion, with bloggers pleading such things like "I don't get Layout" etc. This post is to try to pinpoint the problem, which is, whether the blogger has upgraded his classic template to a beta template or not. Look at the screenshot below (click to enlarge):

In the screenshot, you will see 2 blogs, one with the classic template and one with the beta template. In the first case, on the extreme right, you will see "Layout" (circled in red) and in the second case, you will see "Template" (also circled in red). The first case is a beta blog while the second is still using a classic template. In order to upgrade to a beta template, click on "Template" then click on the "Customize design" subtab, then chose a new beta template.

Amazon products on Blogger templates

NEWER POST

HOME

OLDER POST

Editing or creating a link list in the blog sidebar

Although I have published posts on how to edit or create link lists in the sidebar, some readers are still having problems. Two readers have contacted me to help them do it step-by-step. So, I thought since this is not difficult, I will do it.

If you use a standard Blogger template, most likely you will have this ready made link list in the sidebar, as shown in the screenshot below:


This link list is caused to be displayed by an <img> tag. You can look for it in the blog template by signing into Dashboard, selecting the blog, click the TEMPLATE tab, and the template editor will open. Below is a screenshot of a part of the template where the <img> tag is located:
It would be towards the end of the template. The HTML circled in red is the HTML which cause the link list in the first screenshot to be displayed. This is the HTML you are supposed to edit.

Let's say, you want to link to 3 blogs with the following URL's

<a href="http://foodasmedicine.blogspot.com">Natural Remedies</a> <a href="http://enviromansays.blogspot.com">Enviroman Says</a> <a href="http://guide-to-malaysia.blogspot.com">Guide to Malaysia</a>

you would have to edit the HTML circled in red in the template so that they become

<h2 class="sidebar-title">Links</h2> <ul> <li><a href="http://foodasmedicine.blogspot.com">Natural Remedies</a></li> <li><a href="http://enviromansays.blogspot.com">Enviroman Says</a></li> <li><a href="http://guide-to-malaysia.blogspot.com">Guide to Malaysia</a></li> </ul>

If you wish, you may even change the title Links to something else, like for example My Favourite Sites, so the first line of the above codes become

<h2 class="sidebar-title">My Favourite Sites</h2>

NEWER POST

OLDER POST

How to have PREVIOUS and NEXT links on your posts

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 POST</a></td><td><a href="url of older post"> OLDER POST</a></td></tr></table>

(Note: the characters 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 </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 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
So your HTML will appear like this, for example:

<table><tr><td><a href="url of previous post">PREVIOUS POST</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 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

Creating categories step-by-step

Update: This post was written before Blogger upgraded from the old classic Blogger template to the New Blogger xml template (see old Blogger classic template or New Blogger xml template?, and we had to depend on work-arounds to implement categories, and this method involves manual work each time a new post is published. New Blogger introduced Labels (same as categories) which is automatic, and with New Blogger xml template, it is better to use Label list to add a list of Labels (categories) in the sidebar.


In earlier posts:
Blogger categories: A simple method
Blogger categories: Simple method
methods to create categories was described. However, a reader has indicated a step-by-step description is needed, so here it is:

1. Create a del.icio.us account (see Introduction to del.icio.us). Even if you already have an existing del.icio.us account, creat another one specially for setting up the categories. For the user name, I would suggest using part of the blog's url or title. For example, the user name I selected for doing the categories for this blog is bloggertricks.

2. If you are using FireFox (highly recommended), install the del.icio.us extension with the "My del.icio.us" and "Tag this" buttons (see screen shot below:

Click the "Install extension now" button and follow the instruction. This will install 2 buttons into the toolbar.

3. Click the "My del.icious" button. Confirm that you are logged in. If not, then log in.

4. Surf to the main page (index page) of your blog. At the PREVIOUS POSTS section of the sidebar, click on the very first post. This will take you to the individual post page (permalink) of that post, and the PREVIOUS POSTS will then display the next 10 previous posts. Click the "Tag this" button. A pop-up will open with the url, a description, and boxes for you to enter notes and tags. Enter one-word tags for the category you want that post to be in. If the category is more than 1 word, join them with a hyphen or underscore. For example, for my post entitled "Hiding the navbar", since the post is specific to Blogger, I will tag it with "Blogger-specific" (minus the quotes). You can enter more than 1 tag for each post, the tags just have to be separated by a space. Click [save] when you are done.

5. At the PREVIOUS POSTS section in the sidebar, click the next post, which will take you to the individual post page of that post. Click the "Tag this" button again, and tag that post

6. Repeat for the subsequent post until you have tagged all the posts.

Now, you will have to decide which of the methods you want to use - the Easy Method, or the Simple Method. For an example of the Easy Method, surf over to Natural Remedies to see what it is like. The categories created for this blog Blogger Tips and Tricks is an example of the Simple Method. For the Easy Method, go to step 7. If you want the Simple Method, go to step 9.

Easy Method

7. Click the "My del.icio.us" button. At the top right-hand corner of the My del.icio.us homepage, click HELP, then under BLOG INTEGRATION, click TAG ROLLS. Adjust the settings until the appearance of the tag roll you see in the PREVIEW on the right is what you want. I suggest you change the TITLE to Categories or something suitable. For a fuller description of the settings adjustment, refer to the post Blogger categories: Easy method.

8. If the appearance of the categories (tag roll) in the preview window on the right is what is desired, click on the code box at the bottom of the page to highlight it, right-click and copy (or ctrl+C). Preferably in another tab or window, sign into Dashboard, select the blog, click the TEMPLATE tab to open the template editor and paste the codes into your template in a suitable place. If you don't know where to paste it, refer to Blogger template tutorial: Adding content via the template. Preview, and if satisfied, save and republish. Done.

Simple Method

9. Click the "My del.icio.us" button. This will take you to the "homepage" of your del.icio.us account. On the top right corner, you will see the tags you have created.10. Click on one of the tag (for example, BASIC). This will take you the the del.icio.us page that contains all the links to the posts that was tagged with the category BASIC. Highlight the url in the address bar of that page, right-click and copy. In this example, the url will be http://del.icio.us/bloggertricks/basic.

11. Decide on a suitable place where you want the categories displayed (refer to Blogger template tutorial: Adding content via the template). This will normally be in the sidebar. Open a new window (or tab) and sign into Dashboard, select the blog, click the TEMPLATE tab, and in a suitable place in the template, enter the following code:

<h4>CATEGORIES</h4>
<a href="X">A</a><br />
<a href="Y">B</a><br />
<a href="Z">C</a><br />


where X is the url you copied from step 10, and A is the text of the tag, in this example, BASIC.

12. In the previous window, go back to the My del.icio.us homepage, click on the next tag. In the above example, it will be BLOGGER-SPECIFIC. At that page containing all the links to the posts that are tagged with that category, again copy the url, replace Y with the url, and B with the second category. In the above example, the codes will become

<h2>CATEGORIES</h2>
<a href="http://del.icio.us/bloggertricks/basic">basic</a>
<a href="Y">B</a>
<a href="Z">C</a>


(Y and B have been left as it is in the above example as putting in the real url will make the code extend beyond the gray box, but I hope you get the idea)

13. Repeat step 12 for the third category

14. If there are more categories, just add more hyperlinks and repeat the steps.

15. When all the categories hyperlinks are done, preview, and if satisfied, save and republish. Done.

Books from Amazon

Publishing a Blog with Blogger: Visual QuickProject Guide

Book: Blogging for Dummies

NEWER POST

OLDER POST