playing, by Denise

Sunday, February 15, 2009

Flipping a blog on its head

Have you ever wanted your blog to read from oldest to newest?

Blogs are usually presented with the newest post on top, which makes sense for most blogging purposes. But sometimes... sometimes I just want my blog to read upside down. I keep journals when I travel. While I'm on the road I find the newest first organization acceptable. That allows people who are following me to open my blog and find my latest entries immediately. And since I'm traveling, that makes sense (well, it makes sense to me at least).

It's after I've stopped moving each day that the upside-down format really doesn't work for me, so I've used a fairly easy technique to turn it into an oldest post first format.

First, if you look at any of my travel stories, you will see that they match the look and feel of my photography site, Blogger can be highly customized, and I have changed the template I use to match my own site. If you haven't attempted to go in that direction, the first post in this Digital Grin forum thread may help - HOW TO match your blog to your smug site (blogger-specific). The reason I say should? It should give you some ideas on how to change the look of your blog, and it should be useful even if you are not trying the match your blog to a SmugMug site look & feel. The purpose of this post was to explain how to match a blogger blog to an existing site; maybe you'll find it helpful, maybe not.

I have recently moved all of my travel journals to blogger, and most of them still need to be flipped on their heads. But here's a screen shot from a journal that is completely changed...

OK, OK, you're absolutely right. It's really much easier to look at the page directly. You can jump to my A return to death journal in this window, or in a new window if you want to see the journal plus this post side by side.

Back to flipping a blog on its head...

Building a Table of Contents
The first thing that I did was to collect the URLs of each page in my journal. I used these to create a Table of Contents page for the journal. I also used the same entries to create a Table of Contents sidebar entry. Oh, you're right - I really don't need both. But I wanted the sidebar entries to support easy navigation, and it just didn't feel right not to have a Table of Contents in the overall flow.

>>> I used a href= statements to build the Table of Contents in both places.
>>> I used blockquote statements to indent sections of the Table of Contents entry, and a series of dots (...) to indent sections of the Table of Contents in the sidebar (since I didn't have the room in the sidebar to nicely support the blockquote-style indentations.

I can't include the two variations of my Table of Contents entries here because blogger will render the html and you will see the results of the html instead of the actual code. That wouldn't be helpful at all, so I have uploaded the code to this site -

Files available related to this blog post are
>>> PageByPage_sidebarEntry.txt, and
>>> TableOfContents_forTravelJournal.txt.

Right click on the desired file, select Save Link As..., and save it to a text file on your computer. That will give you the source I used to create the table of contents for the journal I linked to above. Clearly you will need to change the page references to your own URLs, but I find it much easier to look at a working example.

Removing Blogger's navigation
I removed Blogger's normal "newer post" and "older post" entries because I found them confusing after I set the blog to read from oldest to newest. If I could flip the action of those entries that would be preferred over removing them, but I couldn't figure out how to do that. If anyone reading this has a solution - please let me know!

To remove these entries, I added this CSS to my blog html:
.blog-pager-newer-link {
display: none;

I also removed Blogger's Blog Archive from the sidebar by simply clicking on the tools to edit the entry, then selecting Remove. There would be nothing wrong with leaving the Blog Archive entries; that would give your reader two ways to navigate through your journal.

Adding page to page links
Once I created the table of contents, I then took the next step and added next page and prior page links to the bottom of each blog page.

I added a div in my CSS so I could control the look & feel of next/previous entries. This is absolutely not necessary from a functional standpoint, but in case you want to do something similar, here's the CSS I used:
#myPageFooter {
font-family: Verdana;
font-weight: bold;
font-size: 110%;
color: #068481;
text-align: center;
Again, the code I placed at the bottom of the journal pages is html, so I can't just paste it here. I've placed a sample of the code at, in the entry pageNavigation_forTravelJournal.txt. Use right click, Save Link As... to save the sample as a text file.

Did I miss anything?
I hope not, but anything's possible. Feel free to contact me with questions or corrections. If you have corrections, I would be happy to correct this blog post, giving you credit for any corrections that you supply.

No comments:

Post a Comment