Sunday, March 05, 2006

[navigation] previous/next navigation on individual post pages

on many blogs, i have seen very helpful navigation at the top of an individual post page that allows a reader to navigate to one previous post (with a symbol like this <<) or forward to the next post (>>).

is there some way to do this on a blogger blog?

any help would be very very much appreciated!

this post was written by sarah from the delicious life

1 comment:

Anonymous said...

Hey Sarah,

try this code (in case it doesn't copy properly into this comment form, I'll make sure to send it to you via email):

#CSS Styles
.alignright{float:right}
.alignleft{float:left}
.navigation{text-align:center;margin:10px 0;padding:0;width:100%}
.navigation p{margin:0;padding:0}
.navigation a{color:#999}
.clear{clear:both !important;margin:0 !important;padding:0 !important}
.hide{display:none}

code:

[div class="navigation"]
[p class="alignleft"]« [a href="[$BlogURL$]"]Home[/a][/p]
[p class="alignright"] [span][BloggerPreviousItems][a href="[$BlogItemPermalinkURL$]"][$BlogPreviousItemTitle$][/a] »[/span][span class="hide"][/BloggerPreviousItems] [/span][/p]
[div class="clear"][/div]
[/div]

The "[" and "]" need to first be replaced with "<" and ">". The CSS styles should go into your CSS section if not already present and the code should be placed right after (again, [=< and ]=>):

[!-- Begin #main --]
[div id="main"]

PS: make sure to keep a copy of your current template, just in case -for whatever reason- it doesn't work.

A final note, blogger seems to have a limitation around moving to a next post. "previous" works find, but "next" I didn't see anywhere working. Instead "Home" is being used to get back to the first page.