Blogger Next and Previous Buttons
The way I used
The idea was borrowed from diagonalyesterdays
The trickiest part was figuring out the blogger settings and tags.
You will need to set your archive to daily (if you want a page a day)
and add the following before the <blogger> tag:
<!-- Define varables and populate the archive array --> <script language="JavaScript"> <!-- var ArchiveArray = new Array(); var ArchiveLength; var PostName = ''; var PostIndex; var PrevIndex; var NextIndex; <BloggerArchives> ArchiveArray[ArchiveArray.length] = "<$BlogArchiveURL$>"; </BloggerArchives> --> </script>
Then somewhere between the blogger tags you can add the javascript to figure out the current/previous/next:
(Note: for the postName= thing you will want to put the path to yoru archive, I coudl not find a blogger tag that would only print the file name of each archive file. If you know of one please let me know)
<!-- finding current archive name -->
<script language="JavaScript">
<!--
if (PostName == '') PostName = 'http://www.fuzzymonk.com/chris/traininglog/<$BlogItemArchiveFileName$>';
-->
</script>
<!--figuring out previous and next posts-->
<script language="JavaScript">
<!--
var Index;
ArchiveLength = ArchiveArray.length;
PostIndex = -1;
for(Index = 0; Index < ArchiveLength; Index++)
if (ArchiveArray[Index] == PostName) PostIndex = Index;
if (PostIndex != -1)
{
PrevIndex = PostIndex - 1;
NextIndex = PostIndex + 1;
if (PrevIndex < 0) PrevIndex = -1;
if (NextIndex >= ArchiveLength) NextIndex = -1
}
-->
</script>
Finally we print the buttons
<script language="JavaScript">
<!--
if (PrevIndex != -1)
{
document.write('<a href="' + ArchiveArray[PrevIndex] + '">');
document.write('Previous');
document.write('</a>');
}
else
{
document.write('Previous');
}
-->
</script>
||
<a href="/">Latest</a>
||
<script language="JavaScript">
<!--
if (NextIndex != -1)
{
document.write('<a href="' + ArchiveArray[NextIndex] + '">');
document.write('Next');
document.write('</a>');
}
else
{
document.write('Next');
}
-->
</script>
<hr>
</Blogger>
Here is my blogger template test file:
Blogger Template File
Based on Simple II
<html>
<head>
<title><$BlogPageTitle$></title>
<style type="text/css" media="screen">
h1 {border-bottom:dotted 1px #000000;margin-bottom:0px;}
h2 {margin-bottom:0px;}
h2#archives { padding-top:10px;margin-top:40px;border-top:dotted 1px #999999;}
h3 {padding-top:30px;color:#555555;padding-bottom:0px;margin-bottom:0px;}
body {font-family:Georgia,Serif;font-size:1em;margin:3%;padding:0px;background:#ffffff;color:#000000;}
div.blogPost {padding-left:5%;padding-right:10%;}
div.byline {color:#555555;}
p#bloggerBug {padding-top:20px;}
.blogComments {padding-top:30px;color:#555555;padding-bottom:0px;margin-bottom:0px;font-weight:bold}
.blogComments .byline {font-size:1em;font-weight:normal;color:#555555;margin-right:10px;display:inline}
.blogComment {font-size:1em;margin:3%;color:#000000;font-weight:normal}
.deleted-comment {font-style:italic;color:gray;}
</style>
<$BlogMetaData$>
</head>
<body>
<!-- Define varables and Populate the Archive Array -->
<script language="JavaScript">
<!--
var ArchiveArray = new Array();
var ArchiveLength;
var PostName = '';
var PostIndex;
var PrevIndex;
var NextIndex;
<BloggerArchives>
ArchiveArray[ArchiveArray.length] = "<$BlogArchiveURL$>";
</BloggerArchives>
-->
</script>
<!-- To aid with the Blogger NavBar -->
<div id="wrap4">
<!-- Header -->
<h1><$BlogTitle$></h1>
<$BlogDescription$>
<!-- Blog Posts -->
<Blogger>
<BlogDateHeader>
<h3><$BlogDateHeaderDate$></h3>
</BlogDateHeader>
<a name="<$BlogItemNumber$>"> </a>
<BlogItemTitle><h2><BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$><BlogItemURL></a></BlogItemURL></h2></BlogItemTitle>
<div class="blogPost">
<$BlogItemBody$><br />
<div class="byline">posted by <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemAuthorNickname$> # <$BlogItemDateTime$></a><MainOrArchivePage><BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></MainOrArchivePage> <$BlogItemControl$> </div>
</div>
<ItemPage>
<div class="blogComments">
<BlogItemCommentsEnabled><a name="comments"></a>
Comments:
<BlogItemComments>
<div class="blogComment">
<a name="<$BlogCommentNumber$>"></a> <$BlogCommentBody$><br />
<div class="byline"><a href="<$BlogCommentPermalinkURL$>" title="permanent link">#</a> posted by <$BlogCommentAuthor$> : <$BlogCommentDateTime$></div>
<$BlogCommentDeleteIcon$>
</div>
</BlogItemComments>
<$BlogItemCreate$>
</BlogItemCommentsEnabled>
<br /> <br />
<a href="<$BlogURL$>"><< Home</a>
</div>
</ItemPage>
<hr>
<!-- finding current archive name -->
<script language="JavaScript">
<!--
if (PostName == '') PostName = 'http://www.fuzzymonk.com/chris/traininglog/<$BlogItemArchiveFileName$>';
-->
</script>
<!--figuring out previous and next posts-->
<script language="JavaScript">
<!--
var Index;
ArchiveLength = ArchiveArray.length;
PostIndex = -1;
for(Index = 0; Index < ArchiveLength; Index++)
if (ArchiveArray[Index] == PostName) PostIndex = Index;
if (PostIndex != -1)
{
PrevIndex = PostIndex - 1;
NextIndex = PostIndex + 1;
if (PrevIndex < 0) PrevIndex = -1;
if (NextIndex >= ArchiveLength) NextIndex = -1
}
if (PrevIndex != -1)
{
document.write('<a href="' + ArchiveArray[PrevIndex] + '">');
document.write('Previous');
document.write('</a>');
}
else
{
document.write('Previous');
}
-->
</script>
||
<a href="/">Latest</a>
||
<script language="JavaScript">
<!--
if (NextIndex != -1)
{
document.write('<a href="' + ArchiveArray[NextIndex] + '">');
document.write('Next');
document.write('</a>');
}
else
{
document.write('Next');
}
-->
</script>
<hr>
</Blogger>
<!-- Archive Links -->
<h2 id="archives">Archives</h2>
<p><BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>
<script type="text/javascript" language="Javascript">if (location.href.indexOf("archive")!=-1) document.write("<strong><a href=\"<$BlogURL$>\">Current Posts</a></strong>");</script></p>
<!-- In accordance to the Blogger terms of service, please leave this button somewhere on your blogger-powered page. Thanks! -->
<p id="bloggerBug"><a href="http://www.blogger.com"><img width="88" height="31" src="http://buttons.blogger.com/bloggerbutton1.gif" border="0" alt="This page is powered by Blogger. Isn't yours?" /></a></p>
</div>
</body>
</html>
First Way
I got this from redryder52 on bloggerforum.com
You cannot simply use
<BloggerPreviousItems> <a href="<$BlogItemPermalinkURL$>">NEXT</a><br /> </BloggerPreviousItems>
Because <BloggerPreviousItems></BloggerPreviousItems> will cycle through ALL of the previous posts up to 10.
So using that as is would give you up to 10 next buttons. But those navigation buttons are cool. This is fairly easy to fix to only show ONE next button. This question seems to come up every once and awhile so I had a few minutes to tinker with a method to get the prev link easily also.
All you need to do is add a little javascript so it will only print out one next link instead of all of ‘em. But when playing with this I noticed another small problem. On the main page the first post in the previous list will be the same as the first post on the main page…so on the main page you need to go to the 2nd post in the prev post list, on Item pages you need to go to the 1st.
Is that making sense? Otherwise the next button on the main page will go to the last posts item page, which has conceivable already been seen on the main page.
So this is what I came up with. The code is repeated once for the main page and once for item pages so that problem won’t be run into.
<MainPage>
<script type="text/javascript">
var z=0;
<BloggerPreviousItems>
z++;
if (z==2){
document.write('<a href="<$BlogItemPermalinkURL$>">');
document.write('<img border="0" src="http://img126.echo.cx/img126/3160/next28yu.gif" width="80" height="15"></a>');
}
</BloggerPreviousItems>
</script>
</MainPage>
<ItemPage>
<script type="text/javascript">
var z=0;
<BloggerPreviousItems>
z++;
if (z==1){
document.write('<a href="<$BlogItemPermalinkURL$>">');
document.write('<img border="0" src="http://img126.echo.cx/img126/3160/next28yu.gif" width="80" height="15"></a>');
}
</BloggerPreviousItems>
</script>
</ItemPage>
This seems to work. You can see it on my test blog here http://jcommenttest.blogspot.com/
Now the method I fiddled with for the prev button if needed to take you to the previous post if it’s there. It’s not quite automatic, but isn’t too difficult. It uses the LINK FIELD option in blogger, so it assumes it’s not being used in it’s normal fashion already (most blogs don’t, it’s not on be default) First you would have to enable the link field in the settings. Dashboard>Settings>Formatting>Scroll down and change SHOW LINK FIELD to YES. Save Settings.
What this does is put a little input box in the post editor underneath the post title input. This is designed to work with the <$BlogItemUrl$> blogger tag. Whatever is put into the link field input box will be output by that tag. And it should be a URL(at least in this case it should be). Also this tag MUST be inbetween the <Blogger></Blogger> tags in the template to work (more on that in a moment)
So what I did was put the first bit of code right before the Blogger tags and this right after the <Blogger> tag in my test template. <code> <Blogger> <BlogItemUrl><a href=“<$BlogItemUrl$>” title=“Previous”><img border=“0” src=“http://img163.echo.cx/img163/6739/prev28iv.gif” width=“80” height=“15”></a></BlogItemUrl> ……..the rest of your post code……. </Blogger> <code> IF YOU GO THIS ROUTE you will have to check your template to see if the <BlogItemUrl><$BlogItemUrl$></BlogItemUrl> combination of tags aren’t used elsewhere, some of the Blogger templates have it set around the post title,but if the link field isn’t enabled and filled in most won’t notice.If you do this you would probably want to remove those tags elsewhere in the template or it could be problematic. Now when making a new post the link field would be empty. You don’t know what is going to be prev because it hasn’t been made yet. It’s ok to leave it empty, if nothing is in the link field the above code will not output anything. Now here’s where the extra work comes in. After making a new post, you would have to get that newest post’s permalink URL and go back and add it to the previous posts link field. See where I’m going. There would be a couple of extra steps for each post. Post, Get it’s URL, Goto Prev Post and add URL to link field. That’s the easiest way I could come up with getting the prev post button that actually goes to the preceding post. In my test blog I went ahead and added both buttons above AND below the posts, I only added the prev link for the 2nd and 3rd post since this is just a test. There is another method I’ve seen in a Photoblog before here. http://diagonalyesterdays.blogspot.com/ This is actually the coolest method I’ve seen. It looks to me like it’s all done automatically. But from what I’ve seen it needs some additional setup. I think her method is using the list of archived posts and archives are set on daily. Then she never goes to an Item page, only archive pages. And she has some javascript that sorts through the archive list and makes the prev/next links accordingly. But that’s where my understanding breaks down. It seems to put the archive list in an array ( and I don’t handle those well) and then sorts things out but I haven’t really tried to figure it out. Maybe I’ll get bored and try although I’m not very smart. Anyway sorry for the long post, Hopefully this makes some sense to someone if they need it. Obviously the code uses the images that G kindly linked to, you could change it to use any image you want or just text if ya like. Also this most certainly isn’t the only way to do things. Using the link field to setup the prev link is really just manually making the link, but just using the features of the link field to make the formatting a little easier. You could just add a home button to go to the home page, or use javascript back for the prev like G suggested. The only thing I don’t like about that is it’s not a TRUE prev link, only if the browser has already been there. I was just trying to figure out the easiest way to get the hardcoded prev link in. Hopefully someone may find some of this helpful, maybe as an example of what NOT to do..heh. As always backup your current template before modifying. Note:For some that want to have Blogger have Next/Prev PAGES (By pages I mean like a 1st page with 5 posts, 2nd page with the next 5 posts, so on) like some other platforms have this won’t do it. It only will step through the Item pages. Could be useful for photoblogs like eti-eti is doing, Maybe useful on regular blogs for the Item Pages only if you really wanted to go through the trouble of the extra posting steps. I’m not sure if it would be worth the extra steps for a non-photoblog blog. But who knows.
