Pages

Wednesday, September 28, 2011

89

Blogger posts in chronological order, 2011 version

Many bloggers and readers would like to have the option to read the blog, or part of the blog, in chronological order. In Wordpress this is possible and I used it in my blogs, but unfortunately, Blogger does not support this. So we need a hack.

This hack is based on David Merrimans hack, thanks to David for that. But that hack did not work in Internet Explorer, and no longer worked on other browsers either. I first fixed the script for my MS-potilas blog, where I wrote an article about that hack. Now I have rewritten the code, so this is a completely new and better version. It works on new templates (at least on Simple, september 2011) and possibly on old ones, too.

What the script does

The script is placed before </body> tag, so it executes just after the page elements have been constructed. We dig into the DOM model of the page, find the posts, and reverse the viewing order of the posts on that page.


We can make the script reverse the posts on different conditions. For example, I reverse posts when the url contains argument order=ASC (like it worked in Wordpress). I also include the script only for index-type pages (including front page and label searches) using widget tags, so posts and other pages won't have this script.

My script also modifies the previous/next posts links at bottom of the page, adding argument order=ASC there, so user can browse through all the posts, from first to the latest.

Posts in chronological order hack script

Edit your template's html. Find </body> tag, and insert before that this code:

Data provided by Pastebin.com - Download Raw

Now, if you view your blog, nothing is changed. But, if you add #order=ASC to the url of your blog, like http://yourblog.blogspot.com/#order=ASC (you must reload page, F5), the posts on the page should be reversed. If not, something went wrong and you probably should also read this.

How to use it - building the link's url

The code version checks, if url contains order=ASC, so we need a link with order=ASC in it. You probably want this link to go to page with your first page. Link's url looks like, for example (in MS-potilas blog), this: http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7. We add #order=ASC there (& instead of ? because there are arguments already), and the resulting url is http://mspotilas.blogspot.com/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC.

You need to modify the red and green parts and possibly the blue parts of the url to get your first post displayed. First change your blog url, that's easy. Then there is updated-max parameter, which contains the date of the first post not shown anymore on the first posts' page + your time zone. And then the number of posts per page, from your blog's settings.

Let's assume you have 7 posts per page. Go to Edit posts, find the 8th oldest post you've written to your blog, and get it's publishing date and time, say for example 2010/06/30 5:14 pm. And your time zone is PST (Pacific time, GMT-7). Here is your url parameters: ?updated-max=2010-06-30T17%3A14%3A00%2D07%3A00&max-results=7#order=ASC

And explained: 5:14 pm must be changed to 24 hour clock, that becomes 17:14. Time zone must be changed to GMT +- #. Plus sign (+) in the time zone encodes to %2B and minus sign (-) encodes to %2D, so the time zone part is %2D07. First two blue 00:s are the seconds of post timestamp. Last two blue 00:s are minutes of timezone, usually 0, but if not, you need to change them.

Test your url. If result goes off by one post, try incrementing/decrementing the minutes value in the url by 1. Test the next/previous posts links at bottom of the page, too.

Gadget for the link

In my MS-potilas blog, I added the link to the right sidebar using HTML/Javascript gadget. Go to Page elements and add HTML/Javascript gadget where you want it. Contents of this widget (you need to change the red part for your blog, see previous chapter, to get to the page with your first post) are:

<script type="text/javascript">if(window.location.href.indexOf('order=ASC') == -1) document.write('<a href="/search?updated-max=2011-02-14T08%3A08%3A00%2B02%3A00&max-results=7#order=ASC" title="Show all articles in chronological order"><b>Articles in chronological order</b></a>');</script>

Link is shown only, if posts are not already shown in chronological order (the if clause). You can change this, if you want. And of course use your own blog's url, and the link text to your liking. If you're completely lost, read know your way around.

Several posts on same day?

Blogger groups all posts with same date to a group, which in the DOM model looks like one big post. The above script cannot reverse order of the posts inside the group. But if you have posts in your blog with same date, the fix is simple, just install my Show date on all Blogger posts within same date hack, and the posts in same day can now be shown in chronological order.

Option: use script on specific url (label, for example)

Because I wanted to give the reader (and me) the option to read posts in chronological order, while preserving the default view's order, I made the script run with the url paramerer order=ASC and gave user the link. Depending on your needs, you may want to run the script on other conditions. For example, when showing posts with a specific label.

In the code before </body> change <b:if cond='data:blog.pageType == &quot;index&quot;'> to <b:if cond='data:blog.url == &quot;http://yourblog.blogspot.com/search/label/yourlabel&quot;'>. Then replace if(window.location.href.indexOf('order=ASC') > -1) { with only {. You can also use other urls between the &quot;'s.

Tested on

Firefox, Opera (on Linux)
Chrome (on Linux and Windows Vista)
Internet Explorer 8 (on Windows Vista)

I will install this hack on this blog, too, so you can see it working and inspect the source codes.

Update Oct 16th 2011: I made another chronological post hack which uses blog feed, you might want to check that out, too.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text

89 comments:

Adam said... [reply]

This seems like a wonderful solution, much better in many ways than the ungainly stitching together of different web services that I have been using for this purpose

However, I cannot get it to work. I get the "no posts found" error message instead.

I think I must be doing something wrong, because it works in your example. I'm using Safari on OS X.

PS The script also suppresses some of of the scripts I have in sidebar gadgets, though not all of them. At least, these gadgets do not all load when I add "?order=ASC" to an url.

Also, it takes a very long time for my page to load at its root url, without the "?order=ASC." That could just be a coincidence I suppose.

MS-potilas said... [reply]

Hi,

I looked at your blog's (too-clever-by-half) source code. You have misplaced the script: you put it after </head>, so your script runs before the page is layed out, and it cannot find the posts. The script should be put just before </body>.

Adam said... [reply]

Thank you, but I guess I am still confused.

You said that the script failed because it was "after [/head]" and should be "just before [/body]."

(Note that the comments editor is not letting me use regular tag brackets, so I am using [].)

In my template these are mutually exclusive conditions. All of [body]...[/body] is "after [/head]."

I cannot get the script to work by putting it "just before [/body]." That's on Firefox for Windows. There's no error message, it just does not reverse the order of the posts.

On the other hand placing the script just before [/head] (to satisfy your condition that the script not be after [/head]) produces the error message that no posts were found.

I guess I am just not getting something basic about where to put this script.

MS-potilas said... [reply]

Sorry, I was not specific about that. I meant it is not supposed to be right after </head> but just before </body>. You are right, all of body contents is after head :)

I'm not sure what the problem is if you put that in the correct place just before </body>. Maybe some other error on the page that prevents the code from running? You can try put alert("Hello"); in the beginning of the code and see if it is run at all.

You can examine this blog's source code, here it is working (at least on my tests...), and also in my http://mspotilas.blogspot.com/ blog (link name is "Kaikki artikkelit aikajärjestyksessä").

Btw, you can write < and > in comments by writing &lt; / &gt; :)

Hope you get it working.

Adam said... [reply]

Nope, is not firing at all. I wonder why not?

Unlike my apple blog, I did not modify Too Clever's template code. Could the scripts I have running in sidebar gadgets be blocking it somehow?

Yes, I do see that it is working in your example.

MS-potilas said... [reply]

First of all, by looking at Error Console (Firefox: Tools|Error Console) while loading your blog, I noticed that Google's +1 conflicted with [?&]order=ASC, giving security error:

Security Error: Content at https://plusone.google.com/ may not load data from http://too-clever-by-half.blogspot.com/?order=ASC.

But luckily it can be resolved and +1 buttons can work. I changed the addition to urls to #order=ASC and changed the source codes in the article accordingly. Thank you for leading me to that problem so I could fix it.

But this was not the source of your problem. One thing I noticed on your current html code is, that you have alert like this:

alert(&quot;Hello&quot;);

But this gives you syntax error, IF this in inside // block. Inside such block it should be like this:

alert("Hello");

A bit tricky, but the CDATA helps write javascript without html editor escaping " to &" etc. I might write an article about that some time. So you can use this latter version of alert to test, if and where the code runs.

But first change the code to use the # sign, I've updated the article.

Adam said... [reply]

I still can't get it to work, your new code notwithstanding.

I wish I could make some intelligent test or observation in addition to that, but it's all I've got, sorry!

This is a worthy project and maybe others will be able to take advantage of it even if I can't.

Adam said... [reply]

One other thing: With the help of your very explicit instructions (did you write that because of me?) I placed the "Hello" message correctly inside the script.

On that basis, the script is running, though it does not producing the reordered output. (And I removed the "Hello" so that it would not trouble any of my regular readers.)

If there is anything else I could try to help you get to the bottom of this, I am game, please let me know.

MS-potilas said... [reply]

CDATA was a complete mystery for me at starters, too, and also the widget data etc. I searched help and the forums, but very little was found. I already then thought this is an issue that needs clarification, and your feedback was the kickstart for me to write it.

About the post ordering thing. I think I found the solution. Your template was a bit different, but with a little change (one line) the code works for your kind of templates and mine etc. So very good improvement, thank you very much (hope I'm not premature with this).

I updated the article, but for you it is easiest to find line:

var child = getNextSibling(first);

And replace that with:

var child = first;

I'll keep my fingers crossed!

Adam said... [reply]

Here is my latest report on your latest instruction.

As you suggested, I edited the script in my template to replace "var child = getNextSibling(first);" with "var child = first;"

This produced an effect on my blog for the first time, reordering the display of posts except for the first (most recent) in series, which remained firsts instead of being shifted to last.

I tried to report this to you in a comment here, but the comment did not publish (I hope this one will) and when I contacted you through the blogger help forum you said I had not made the change you suggested.

That's a puzzling thing to say. I did make the change and it had an effect, though a flawed one.

Thinking, however, that I had made some other error, I have now simply copied the latest version from this blog post and pasted it over the old script in my template.

The result, however, is disappointing, in that now it is not working at all on my blog.

So I hope this comment makes it through, and I await your further instructions.

MS-potilas said... [reply]

Your comment made through this time. I see the posts reverse on your blog, i.e. script working. Yesterday there was still the old version. Do full reload of the page, adding #order=ASC to url is not enough, because it does not reload the script (just tries to reposition scroll bar on page)

Adam said... [reply]

More progress! This does indeed work in Firefox (Windows) and Internet Explorer. But, not in Chrome (Windows).

Sorry I missed that--I do all my blog stuff in Chrome.

Later today I will test it out on my two OS X browsers, Firefox and Safari.

MS-potilas said... [reply]

In my tests it works:

Chrome: Windows and Linux
Internet Explorer
Firefox: Windows and Linux
Opera: Linux

I see no reason why it should not work on other browsers/OSes, because DOM model handling is tight.

I think you are testing it wrong. I will tell you how it won't work:

1. Open http://too-clever-by-half.blogspot.com/ in (any) browser
2. Goto URL bar and add #order=ASC to url, and press enter.
3. Nothing happens.

That is why I said in the earlier comment that you have to reload the page. Adding #anything to url won't reload the page and so run the script. The browser just looks for a named anchor "anything", if it finds, scrolls to it, if it does not, does nothing. Which is I suspect happened to you.

So press that F5 on your browser (or select reload button/menu item).

MS-potilas said... [reply]

To clarify my previous comment, in my tests I tested your page on those browsers/systems, all working (not my page(s), those I had tested earlier (working)).

Adam said... [reply]

Yes, it's all working on all the browsers I can find too.

This is a great thing! Thank you.

Do you know at this time of other issues that might make this script misfire or be unreliable?

MS-potilas said... [reply]

Javascript DOM handling is solid, so it won't break on future browsers. The one line which was modified, was a logical assumption error. I assumed earlier that in the posts' container there is always at least one non-post element before the posts (like in all three templates I used it was), so the code skipped the first element in search for the first post -> your first post did not move. Now it begins the search for the post from the very first child element.

If you stick to those templates where code now works, there should not be problems. Code works maybe on most templates out there now, not sure, but I checked very many very different looking blogs and they have same DOM underneath.

I also think, that the Blogger won't change (traditional) layout templates' DOM too soon, they've got other things in hand (like dynamic views).

I'm really glad you got it working!

nonpareil said... [reply]

I can't seem to get this working :s

MS-potilas said... [reply]

@nonpareil
Hi,

I can try to help you get it working, if you tell me more: in what blog are you trying to install the hack, what went wrong, etc.

MCB said... [reply]

Great job. It works very well in Chrome, Firefox and IE.

It's very useful. Thank you :-)

MS-potilas said... [reply]

@MCB Thanks! Works also on Opera and Conkeror. About Safari, Konqueror or any other browsers I don't know.

My Blog said... [reply]

Can you please email me? littlekariblue@gmail.com

I'm wondering about this if it would work with just certain 'tagged' posts. I also am wondering if you can help me install it. Thank you for any help you can provide.

MS-potilas said... [reply]

@My Blog,
unfortunately my resources are limited, so I won't be able to give specific installation service of my hacks on other's blogs, and also email support is not possible. Sorry about that. I offer these hacks only "as is".

For your question about tags (=labels), yes, it can be installed for a certain tag, so that it reorders the posts only when you are viewing that tag. In chapter Option: use script on specific url (label, for example) I talk about that, and there are instructions what to change.

Easier solution for you might be this other hack, which pulls the posts from blog feed. As that article tells you, make a page, insert the code, in the code you would use: var feedURI = "/feeds/posts/default/-/yourlabel"; to get posts with a specific label displayed.

Also know your way around :)

Good luck!

Zafi said... [reply]

Great post!! I need a little help regarding my blog feed - I'd be grateful if you can help. I have landed on your page searching for a solution to my problem and on reading this post I felt that you can help me. My blog feed(Atom) is nicely displaying my posts in the published order, but it is displaying the last edited date instead of the published date for each post. This is happening in IE9 and Firefox 6, but it's displaying the published date in Safari. I don't understand what's the problem. Is there a hack using which I can display the original published date instead of last edited date beside each post in my feed? Any help would be greatly appreciated. Thanks

MS-potilas said... [reply]

@Zafi

Hi Zafi, in the blog feed there should be both information for the posts, the published date and updated date, like this in the raw xml:

<entry><id>tag:blogger.com,1999:blog-BLOGID.post-POSTID</id><published>ISO8601DATE</published><updated>ISO8601DATE</updated> ... rest of the entry

Maybe different browsers use different field from the feed to display the date. Common feed readers, like Google Reader, should display the correct published date.

If this did not help, you could also try Feedburner to "reburn" your blog feed.

Zafi said... [reply]

@MS-potilas
Thanks for your reply. As you said when I viewed the source, all the entries are in the feed xml file, but IE and Firefox are displaying the updated date instead of published date. When I used feedburner, then also I am facing the same problem. I don't know if everyone is facing the same problem because I have not seen much concerns about this on the net when I tried to get a solution for this problem. NOw, the only thing I can think of is to change the last edited date by some means. Is there any trick for that?

Beben Koben said... [reply]

it's similar with random post?

MS-potilas said... [reply]

@Beben Koben Hi, this uses different technique than random posts gadget. This script changes the default reverse chronological order of the posts on the page to chronological order, i.e. oldest post at the top of the page. Random posts gadget, on the other hand, randomly selects posts from the blog feed. My other chronological order hack pulls the posts out of the blog feed, so it has similarities to random posts gadget.

MS-potilas said... [reply]

@Zafi
I don't think you can change the last edited date, except by editing the post when it is set to current date and time.

I checked this blog's feed on Firefox, and it has the same problem you described, wrong dates are displayed. This probably is some kind of a bug, but is it with Blogger or Firefox/IE, that I don't know.

Maybe you could ask this at Blogger forums, if someone there knew something about this.

(sorry I answered your comment this late, your comment was for some reason automatically marked as spam, and I did not notice it until now)

Zafi said... [reply]

@MS-potilas
Thanks once again for ur reply. I tried asking in blogger forums earlier, but as usual there's no one to help. Anyway, I'm leaving my blog without any feeds for now as it's looking very awkward with wrong dates. As I had been planning to make lots of posts these days, I guess I have to create a new blog, probably wordpress and then do my postings. This time I'll be careful not to edit any post once it's published ;-)

Ratprincess said... [reply]

Hi, Ms-potilas, hope you are feeling ok. A question, what about the time of posting within a day? They are still not in chronological order. Would be nice since sometimes I make multiple postings in a day.

Thanks a million because this hack saved me a whole lot of work!

And, what is the maximum number of posts I can show in one page?

http://ratologyreloaded.blogspot.com/search?updated-max=2011-11-30T08%3A08%3A00%2B02%3A00&max-results=200#order=ASC

Ratprincess said... [reply]

Oh... btw, it seems like it doesn't work by simply adding #order=ACS to the end of the URL...

http://ratologyreloaded.blogspot.com/#order=ACS

Thanks a million again for creating this heck... I look forward to your response!

MS-potilas said... [reply]

@Ratprincess
Hi Ratprincess,

thank you for trying this hack. But you have to be careful reading and installing these hacks :)

For several posts on same day, see the chapter Several posts on same day?. And you are right, #order=ACS does not reverse the order, it is #order=ASC :)

And, because you (now) have just one post on main page, adding #order=ASC to the main url does nothing. You have to make the link to the first (oldest) page of posts, using posts' datestamps, see chapter How to use it - building the link's url.

Maximum number of posts on Blogger page was limited after the auto pagination was introduced. I think the actual maximum is dynamic so, that page does not grow over 500 kilobytes. I think you can find some reference about that. Usually smallish number of pages is good, from 5 to 20 posts per page, for example.

Here's also another hack to display posts in chronological order, in a static page: http://yabtb.blogspot.com/p/chronological-post-order-from-blogger.html, you might want to check that out, too. With that hack you should be able to display all your posts on the same page in chronological order (they are loaded dynamically after page load, a bit like in dynamic views).

Hope these help.

Ratprincess said... [reply]

Thanks for your prompt response. I actually tested the hack on an internal blog of mine and it didn't work...

Thanks again for your response and I will try out the resource you provided.

Adam said... [reply]

I just wanted to note that I am recommending this method to those who come to my blog seeking a way to flip their content.

Thanks again!

MS-potilas said... [reply]

@Adam Thank you, much appreciated. Very thorough article.

Adam said... [reply]

MSP, this is a little off-topic, but can you think of a way to put some introductory text on the oldest ("first") ASC generated by this script?

It would just be so useful to be able to explain what people are looking at.

I tried some conditional HTML in the template, but apparently data:blog.url does not report search querries.

Any thoughts?

MS-potilas said... [reply]

@Adam Hi, I think the best would be to use javascript, it can handle full urls, and reversing the posts need javascript so it is available. You could do something like this (in an appropriate place in the template, you can choose):

<script type='text/javascript'>
//<![CDATA[
if(window.location.href == "yourfirstpageurl") { // for the first page only (with #order..."
document.write("write any <b>html</b> here<br />");
}
//]]>
</script>

or this

<script type='text/javascript'>
//<![CDATA[
if(window.location.hash.indexOf("order=ASC") != -1) { // for every page, when reversed
document.write("write any <b>html</b> here<br />");
}
//]]>
</script>

You can use multiple document.writes, if needed. One could put the javascript inside conditionals to make it work only on index, but that makes it more complex. For more info, see for example this article.

Adam said... [reply]

@MS-potilas I think I see, thank you! I'm afraid I do not know my way around the blogger template, however.

Where would I put this to write the text in the "main" section before the first post? And how can I format it? Is it just a matter of putting the text inside span tags associated with a particular class?

MS-potilas said... [reply]

@Adam Yes, pretty much so. But I just figured an easier way than template hacking: place the second code sample in your blog's oldest post (in html editing mode). Edit it to print whatever you want. I just did so in this blog, you can check it out :) (select chronological order, and the first post will contain extra text in red).

Adam said... [reply]

@MS-potilas Sweet! But where would I put the script in the template if I wanted the text to precede the first post entirely?

Willem said... [reply]

Hi there,

Thanks for your hack. I just started blogging by putting my old travel journals online and I wanted to have my posts sorted chronologically once a journey is completed.
Your hack does just that.

I have also added a condition. I wanted my postst to be sorted chronolically when they were on a label page. So I made a link list with my label and added the condition:






around your script and also did something similar for the next/prev buttons.

It works OK.
There is however something that I haven't been able to do. Perhaps you can help.
My initial problem was that when a labelpage is loaded the last max# of posts are show in chronological order. I wanted it to start with the first max# of posts. To do this U have added the date of the max#+1 post for each label page to the labelurl. This works but when I click on the next button the problem is back again. The blog does not show the next max# of posts but shows the last max# of posts (stil in chronological order so that still works fine).
It looks like blogger first 'chooses' the - not reversed - range of posts after which they are being reversed. So when my posts exceed the maximum posts on a page the wrong range of posts are being displayed (the last instead of the first).
You can check this by looking at my blog: willemsfietsvakanties.nl and choosing one of the journals (labelpages on the top right menu) and clicking 'nieuwere berichten' (= newer posts) at the bottom
Could you help me?

thanks

MS-potilas said... [reply]

@Willem Hi, that seems to be a bug in label search pages, on all Blogger blogs. For example in this blog label "hack" currently has three pages. Here's a link to oldest posts with label hack. The "newer" link does not lead to the middle page, but to the newest page.

You could try to get some help from Blogger product forums.

bruise said... [reply]

Hi,

Thank you very much for your useful code on reversing the posts. I tried to implement it on a blog here but there seems to be a problem. I only want to use the code for labels, and I already used an html code on layout so as to put a custom menu where somebody could just click on a category (label). The problem is that it isn't working at all and even thought I use the simple theme and everything seems fine in the preview, this just doesn't do anything. Also, I couldn't put more than one urls together, even with the quots but had to put the code three times due to some kind of error. Is there something I could do? I'm sorry, I really tried to find a solution on blogger help but nothing could do.

MS-potilas said... [reply]

@bruise
Hi,

I think there might be some error in the installation, because of the errors you got while installing.

But because Blogger label search pages have bug in previous/next posts links, I think if you need reversing of a label search, then you could try making a page for each label you want to reverse, and use my other post reversing hack there, this one: http://yabtb.blogspot.com/2011/10/blogger-feed-chronological-order-posts.html.

In the hack in feedURI variable you would use url like this:

http://yourblog.blogspot.com/feeds/posts/default/-/yourlabel

bruise said... [reply]

Thanks again. I'll try this right now.

Kingson Man said... [reply]

Thank you! It was somewhat difficult for me but by following your instructions carefully I was able to get everything to work - posts in chronological order, working widget, and even multiple posts on the same day.

Meiser said... [reply]

Good morning.
I found this but does not work:
http://www.spiceupyourblog.com/2010/04/change-order-of-blog-posts-date.html
The idea is interesting. Can it be improved ?

MS-potilas said... [reply]

@Meiser
Hi, Merriman's hack seized to work in 2011, so I made a working version out of that hack, and then I further developed it to the version in this article. See the start of this article for the history. This hack is also installed in this blog, see the right side bar for link.

Meiser said... [reply]

Thank you.
I test your gadget with a new blog which contains 15 messages from 1 to 15 January.
With http://test-ordre-chronologique-2.blogspot.be/, messages 15 to 9 are displayed. This is normal.
With http://test-ordre-chronologique-2.blogspot.be/ # order = ASC, messages from 9 to 15 are displayed. It is also normal.

But, it does not find the first post of 01/01/2013 at 06:12 with the code that you specify.
What address should I encode ?

Thank you in advance.

MS-potilas said... [reply]

@Meiser
Message 1 did show, it was on the third page, same as when order is not reversed.

To make message 1 show first, with six other messages, take the date and time from 8th post to make the url:

http://test-ordre-chronologique-2.blogspot.be/search?updated-max=2013-01-08T10:00:00-08:00&max-results=7#order=ASC.

Meiser said... [reply]

Good morning.
Thank you for your answer. I tried to encode the first date of the first message and not the eighth.
3 small remarks:
1) when you get to the first page, the blog displays the URL of the blog, and so, to go back, we go from 7 in 7 posts, and everything is offset from the previous displays.
2) The 7 messages appear once in reverse order and then in chronological order. Can we avoid the first display?
3) For models 2010 from Blogger, how can we reverse the position of links "recent posts" and "older posts"?
Thank you in advance.

MS-potilas said... [reply]

@Meiser
Hi, going to the first page unfortunately changes the paging, because first page (home page, newest entries) always displays the specified number of posts. So same posts may appear as in previous page. I have not found a perfect solution for this, but I think it is not so big problem especially in larger live blogs - when reader gets to the "last page of reading" (the home page, newest entries), (s)he just skips the entries already seen on previous page.

One could try altering the max-results value for home page. Or making some dummy posts before the newest, so there is right amount of posts.

For me, the "Older posts"/"Newer posts" links work logically ok, so I have not tried to swap them. Probably jQuery would be the easiest to swap elements on screen.

Meiser said... [reply]

Good afternoon.

I thought of another solution : display on the first page a smaller number of posts.
Example: 7 posts per page and a total of 16 pages, the first page might display only 2 posts starting from the third post.
Calculation: 16/7 = 2
16-(7 * 2) = 2

This can not be done manually because it would change for every post creation. Can we determine whis the feed which is the third post ?

This would also facilitate the installation of the widget.

MS-potilas said... [reply]

@Meiser
Yes, it can be done! Thank you for the idea. The code creates the chronological link in javascript, using two calls to the blog feed. Put it in a html/javascript gadget, and the link will be constructed there. The code is here for trying: http://pastebin.com/cwzrbSHh.

You can have any html there, just make sure the link has id="chronLink".

If it seems to work also on your tests, I might write a small article about that. :)

Meiser said... [reply]
This comment has been removed by the author.
MS-potilas said... [reply]

@Meiser Looks like you have Merriman's post reversal hack on that blog, not this one.

Meiser said... [reply]

To get it working properly, it is necessary that the number of posts per blog page is identical to that of gadget. Otherwise, this number may change by displaying the first page. It would be more appropriate that the gadget uses the number of posts per page of the blog.

MS-potilas said... [reply]

@Meiser
This hack is just for "temporarily" changing the order to chronological order. Default view is still the reverse chronological order, and that's why Home link takes you to the normal home page of the blog. When chronological view is on (after clicking the link in the gadget), only things affected are the order of the posts on the screen, and older and newer post links, which contain #order=ASC.

You're right, the number of articles per page in the gadget must be the same as in blog's settings, I should have instructed you. I first thought of getting it automatically for example from the "older posts" link, but then I realised that the link is not always there (when viewing an article or a page, for example). And I don't know any other way to get that setting, so user must check that it is the same, when installing the link gadget.

Meiser said... [reply]

Can we not use "data: numPosts"?

Meiser said... [reply]
This comment has been removed by the author.
MS-potilas said... [reply]

@Meiser
data:numPosts has number of posts/pages viewing currently on the screen, so when viewing post or page it has value 1. Additionally, it is only available in template, not in gadgets, which would make installation more difficult.

Yes, you could have the link different when viewing in chronological order, you could try something like this in javascript instead of the html markup for the link:

if(window.location.href.indexOf('order=ASC') == -1) document.write('<a id="chronLink" href="/search?max-results=7#order=ASC">Articles in chronological order</a>'); else document.write('<a href="/">Articles in chronological order</a>');

Meiser said... [reply]

Good afternoon.

I confirm that, at the opening of blog, the link in the right sidebar works randomly.

Sometimes it works, and the called address is :

http://test-ordre-chronologique-2.blogspot.be/search?updated-max=2013-01-06T06%3A15%3A00-08%3A00&max-results=7#order=ASC

Sometimes it does not work because the called address is:
http://test-ordre-chronologique-2.blogspot.be/search?max-results=7#order=ASC
In this case we get the same page in reverse order.

MS-potilas said... [reply]

@Meiser
When the link is the latter (which only reverses the posts on the home screen, and which is only a placeholder), the script has not yet finished making the url for the link. When testing after your report, I found that sometimes it takes several seconds, because script starts only after blog is loaded, and there where some really slow loading google apis & other stuff.

There is not much/anything where the script can fail, if Blogger gives the json-in-script feeds. So I suggest you try and wait a bit longer and see if that is the problem.

One way to prevent user from clicking too soon could be hiding the link until url is ready, make this change:

if(window.location.href.indexOf('order=ASC') == -1) document.write('<a id="chronLink" href="/search?max-results=7#order=ASC" style="visibility:hidden;">Articles in chronological order</a>'); else document.write('<a href="/">Articles in reverse chronological order</a>');

(added style="visibility:hidden;")

And change

if(a) a.href = link;

to:

if(a) {
a.href = link;
document.getElementById("chronLink").style.visibility="visible";
}

After these changes, ff the script should fail for some reason, the link does not display at all.

Hope this helps. :)

Meiser said... [reply]

Good morning.
I did a test. But the link does not appear. This seems normal because it verifies the value of a (zero) and does not return :
if (a){

MS-potilas said... [reply]

@Meiser
Variable "a" can only be zero (null) if there is no unique element with id="chronLink". I tested your page on Firefox and Chrome and I seem to get the correct link.

After viewing the html code of your page, I found there are two places on your blog, where the chronological link with id="chronLink" is written. This does not work, because element id:s must be unique. I think Firefox and Chrome give the first element, while Internet Explorer or other browsers can fail on that.

So you must remove the other link constructing code (gadget HTML3).

Meiser said... [reply]

Good morning.
1) I checked and in fact I had not copied a hook:}. It works.
2) I removed the second "id". So the link "home" modified does not work properly. This allowed to reach the first page in the selected order (chronological or not). It seems imporatant and more logical for visitors. Do you have a solution?
3) I have added a code so that the link only appears on the index pages.
4) Can we avoid dual display when we want display the chronological order : in not-chronological order and after in chronological order ?

MS-potilas said... [reply]

@Meiser
You could modify the template for the home link, so that it contains for example id="chronLink2" so it is different. Then in code:

var a = document.getElementById('chronLink');
if(a) {
a.href = link;
document.getElementById("chronLink").style.visibility="visible";
}
a = document.getElementById('chronLink2');
if(a) a.href = link;


Bold part is new. If you want more home-links modified, just give them unique id:s and repeat that code with a new id.

I don't know any good way to show blog in chronological order as soon as it is opened, when this method to reverse the posts is used. Maybe template could be changed so, that home page url with no parameters only runs javascript to get the url and redirects to that, but the screen would "flash" (first load one page and then redirect to another) so it might not look good. I think the chronological order from feed with your "first post method" is better way to display the posts chronologically right away.

Meiser said... [reply]

Good afternoon.
Now everything works. Congratulations.
1) You wrote:
"I first thought of getting it automatically for example from the "older posts" link, but then I realised that the link is not always there (when viewing an article or a page, for example)."
But this link exists at the opening of the blog. Can we not put this value in a variable which will remain valid in case of change of page, even if the link is not there ?
2) The dual display is this : when we display posts in chronological order and when we change of page, posts are displayed once briefly in reverse order, before to be displayed in chronological order. Can we avoid this?
3) This code works in a widget. But what code should be put in a "home-post" for to have a blog in chronological order at the opening of the blog, if author wishes it ?

MS-potilas said... [reply]

@Meiser
Hi,
1) Cookie could be used for storing this value, but there are some issues: what is the expiry time? what if user comes to blog some other way than home page. Something like this could work but I think it is overkill compared to setting the variable by hand:
- check cookie for max-results
- if not found, check "older posts link" and get max-results there
- if not found, load main page into variable (using jQuery) and get max-results from "older posts link"
- if found set cookie (expiration time 1 day/1 hour/?)
- if not found set max-results=7 (fallback) (don't set cookie)


2) Ok, I first understood this dual display question wrong. I think it could be done by modifying template so, that posts area is not visible first, and then after reordering the posts javascript turns the posts area visible. The posts are reversed quite quickly and I was satisfied with it, so I have not tried this.

3) I answered to this previously, when I did not understand the "dual display" question. Here again:

I don't know any good way to show blog in chronological order as soon as it is opened, when this method to reverse the posts is used. Maybe template could be changed so, that home page url with no parameters only runs javascript to get the url and redirects to that, but the screen would "flash" (first load one page and then redirect to another) so it might not look good. I think the chronological order from feed with your "first post method" is better way to display the posts chronologically right away when opening the blog.

Meiser said... [reply]
This comment has been removed by the author.
Meiser said... [reply]
This comment has been removed by the author.
Meiser said... [reply]

Good morning.

Thank you for these explanations.

I continue my tests.

The link "home" in the footer leads to the first post and following, in the order selected : chronological or reverse.

This works very well except in one case : displaying a message, the link "home" always leads to the first page, but only in reverse chronological order.

Can we avoid this?

Could we add #order=ASC to the address of a post : like this :
http://test-ordre-chronologique-2.blogspot.be/2013/01/message-2.html#order=ASC

MS-potilas said... [reply]

@Meiser
Yes, it is possible to add that anchor. In pure javascript it would be quite lengthy, but in jQuery it can be done in one line:

$("h3.post-title a").each(function() { $(this).get(0).hash="order=ASC" });

This selects all "a" tags under "h3" tags with class "post-title", and adds "hash" (anchor) #order=ASC to each link.

Meiser said... [reply]
This comment has been removed by the author.
MS-potilas said... [reply]

@Meiser
Hi, you must have jquery loaded for the line to work. There are examples in my blog how to do it, for example here. :)

And the position of the code, it should run after the posts are reversed, not when the link is constructed (then the posts aren't reversed). So I would place it on the post reversing code (the listing in this article), the empty line #80 would be good.

Meiser said... [reply]

Good evening.
It works. Thank you.

Meiser said... [reply]

Good afternoon.
To prevent double posting, it is difficult to find an "id" common to old and new templates.
So I thought to add these 2 codes for display in chronological order:
document.getElementById ("main"). style.marginTop = "400px";
then:
document.getElementById ("main"). style.marginTop = "0px";
Could you tell me where to insert them in your code?

MS-potilas said... [reply]

@Meiser
Hi, I suggest you use the following CSS style:

#main { margin-top: 400px; }

and then add this

document.getElementById("main").style.marginTop = "0px";

in a script block before </body>, but after the post reversing code. It will need own <script> block because the reversing code is inside conditional tags.

Meiser said... [reply]

Good evening.
Thank you, but what is desirable is to avoid ONLY the display 5-4-3-2-1 (1-2-3-4-5 before) WHEN requesting the display in chronological order.

MS-potilas said... [reply]

@Meiser
That is a bit tricky, because the element does not exist until it is seen on the screen, so getElementById fails. CSS is a way to modify the style before element exists. Because you use jQuery, the following should work, insert it in a script block before </head>

if(window.location.href.indexOf('order=ASC') > -1) $('<style type="text/css">#main { margin-top: 400px; }</style>').appendTo("head");

And this line:

document.getElementById("main").style.marginTop = "0px";

add it to my script between lines 78 and 79 (both lines contain '}').

Meiser said... [reply]

Good evening.
It works. Thank you.

Meiser said... [reply]

Hi everyone.

An example of use of the code is available at this address:
http://test-ordre-chronologique-2.blogspot.be/

Explanations can be found here :
http://modifier-les-modeles-de-blogger.blogspot.com/2009/11/reverse-order-of-posts-more-1.html

MS-potilas said... [reply]

@Meiser
Thanks, great improvements and simple installation with external .js file, I think this could be called the 2013 version. :)

Dominic said... [reply]

I'm trying to get this to work but am having trouble. If I add #order=ASC to my home page in the browser's address bar and hit F5, it works. My problem is identifying where to insert the #order=ASC in the HTML code. I've entered it in a couple of different spots where I thought my URL was but it didn't work. How do I find where my URL is within the HTML code?

MS-potilas said... [reply]

@Dominic
Hi, you can put the link in a sidebar gadget, for example. Design -> Layout -> Add gadget. You can use link list gadget or html/javascript gadget.

Sorry for the late answer, I was on holiday. :)

HenningKO said... [reply]

[ Reposting because I didn't press preview before posting last time and my bits of code got squashed. Sorry. ]

I'm not too big of a coder, but I was able to get chronological order to work over the whole blog, including labels and archive by just commenting out that conditional at the beginning of your code:

<!-- post reversal code by mspotilas 2011 -->
<!-- <b:if cond='data:blog.pageType == "index"'> -->

And of course, same with the </b:if> at the close. It seems like this is what a lot of people are looking for. I, for one, am not interested in preserving the typical blog order of the default page, I just want my whole blog to work in chrono order and your code, with my little tweak (and also your dates on all posts hack) works great for this! You don't have to worry about applying it to specific urls or always giving your url to people with the #order=ASC attached, it just works without that conditional telling it WHERE specifically to work...

Check it out: the blog in question

MS-potilas said... [reply]

@HenningKO
Hi,

thanks for your reply. Yes, removing the conditional statements makes it reverse the posts always. This works especially for small blogs where the entries fit the home page, but if there are more entries, then home page shows only the latest posts in chronological order, not beginning from the first post.

HenningKO said... [reply]

@MS-potilas

Ah I see. Well I'm not done filling in the blog, we'll see if I run into the limit. Is it something like the 500 posts you mention in the other hack or is it more like 50?

MS-potilas said... [reply]

@HenningKO
It is the amount of posts that one blog page shows at most, it can be set in blog's Settings >> Posts and comments.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: