Skip to main content

Creating A Horizontal Index For Your Blog

Most of us, when we setup a blog, we just write the posts, and maybe add an Archives Index gadget in the sidebar. If we want to get fancy, we can use labels, and have a Labels Index in the sidebar.

You may want to make your blog look like a web site, with the new Blogger static pages editor, and an index at the top of the blog. That's not a difficult thing to do, it just takes ingenuity. Note as in many of my posts, all example code here is presented with lots of gratuitous line breaks.

With a new Designer template, or possibly a recently updated Layout template, you can position any standard linklist into the Tabs section at the top of the blog. Look above, just under the header. See my menu bar?

If you can't use the Tabs section for some reason, you can still add a horizontal menu bar, to the top of the blog - or anywhere else.

If I wanted to organise my blog by the days of the week ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"), I start by assigning labels to my posts. Then, I could add a Linklist gadget in the sidebar, indexing the labels.

<ul><li><a href="http://blogging.nitecruzr.net/search/label/Home?
max-results=100">Home</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Sunday?
max-results=100">Sunday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Monday?
max-results=100">Monday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Tuesday?
max-results=100">Tuesday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Wednesday?
max-results=100">Wednesday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Thursday?
max-results=100">Thursday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Friday?
max-results=100">Friday</a>
</li><li><a href="http://blogging.nitecruzr.net/search/label/Saturday?
max-results=100">Saturday</a>
</li></ul>


That's interesting, but we can do better. Instead of a plain old linklist in the sidebar, let's have a horizontal link list, in a menu bar, at the top of the blog. For the days of the week, that's easy enough to do. The one obvious limitation here is horizontal space - there's probably enough space for say 8 entries ("Home", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"), and there might be enough room for the days of the month ("1", "2", ..."31"), but there will probably not be for the states in the USA ("Alabama, ... "Wyoming"). Know your spacial limitations.

To make this look good, make a horizontal table - with one row.

HomeSundayMondayTuesdayWednesdayThursdayFridaySaturday


<table cellpadding=7><tr><td><a href="http://blogging.nitecruzr.net/search/label/Home?
max-results=100">Home</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Sunday?
max-results=100">Sunday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Monday?
max-results=100">Monday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Tuesday?
max-results=100">Tuesday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Wednesday?
max-results=100">Wednesday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Thursday?
max-results=100">Thursday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Friday?
max-results=100">Friday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Saturday?
max-results=100">Saturday</a>
</td></tr></table>


Not bad, but we can do still better. This sort of table looks better centered, and with a border.

HomeSundayMondayTuesdayWednesdayThursdayFridaySaturday


<table align="center"><tr><td><table align="center" border=1 cellpadding=7><tr><td>
<a href="http://blogging.nitecruzr.net/search/label/Home?
max-results=100">Home</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Sunday?
max-results=100">Sunday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Monday?
max-results=100">Monday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Tuesday?
max-results=100">Tuesday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Wednesday?
max-results=100">Wednesday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Thursday?
max-results=100">Thursday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Friday?
max-results=100">Friday</a>
</td><td><a href="http://blogging.nitecruzr.net/search/label/Saturday?
max-results=100">Saturday</a>
</td></tr></table></td></tr></table>


HomeSundayMondayTuesdayWednesdayThursdayFridaySaturday


I can stick my index code right into a post, or I can make a new gadget, of HTML / Javascript, and move it to the top of the blog, maybe just below the header. If you have trouble positioning a gadget below the header, you may have to tweak the template slightly.

And there, you have a horizontal index. Now, add static pages, to link to from the index.

For practical examples of a horizontal linklist, as described above, see

Comments

Anonymous said…
Thanks, Chuck.

Another asset for the armoury.

Bob
King Hambali said…
I AM A NEW INDONESIAN BLOGGER , I THINK I NEED FOR MY BLOG, I WILL BE TRY, THANKS SO MUCH BRO!!!!!!!!!
Erica-Rose said…
This is great! Thanks!!
Anonymous said…
I like the simplicity of your instructions, and I can't wait to create my new and improved horizontal Link list menu bar!

Thank you for such good work!
Cathy
Oh my gosh! Thank you so much for this post! I can't wait to try this tonight. Really appreciate it.
I was able to create the horizontal index, however I can't figure out how to link the topics in the horizontal index to each designated web page/posting. IN other words, how can I place links on each topic of the horizontal index to land in a designated posting/webpage? Thanks
Nitecruzr said…
Renata,

Each cell in the index is just a link, just like any link in your blog. It's simply a link enclosed in a box (the box created by the "<td> ... </td>" pair).

Look at the example above.

<td>
<a href="http://blogging.nitecruzr.net/search/label/Home?
max-results=100">Home</a>
</td>

That's just a link, with "blogging.nitecruzr.net/search/label/Home?
max-results=100" as the target, and "Home" as the caption.

Maybe, you could ask these questions in my forum Nitecruzr Dot Net - Blogging, where we could converse more easily.
Jen said…
Great Post...I was able to add the table and change my Headings but now it won't search for the Posts. Could you explain why that is.

Thank you for the help and great add-on.

http://www.mommysonlinegaragesale.com
Adam said…
hey dude,
just started using this on my blog,

http://www.totallybone.com/

really appreciate it was exactly what I was looking for. Only thing is I'd quite like to make the box bigger so it goes all the way under the header image. Had a look around your site and the internet but am unable to find how to do it...
Hope I'm not being too dumb, If you could offer any advice I'd really appreciate it
cheers mate,
Adam
Nitecruzr said…
Adam,

You see the last couple examples, which show you varying the size of the table? Play with the sizes.

If you can't sort it that way, post in Blogger Help Forum: How Do I?, or in Nitecruzr Dot Net - Blogging, for peer advice.
Mary said…
Thank you so much for posting this...I created something with generic tags just to see if it would work and it looks great.
Japie Bosch said…
Excellent. Thanks for sharing.
Anonymous said…
It seems so easy for everyone, but I still do not get how to add a menu bar
Nitecruzr said…
Hey Home,

These instructions won't, unfortunately, work for everybody. If you're still having problems, post in Blogger Help Forum: How Do I?, for peer support and instruction.
Kel said…
hi...

got 1 question here...i was able to create the vertical index as the 1st example....but when it comes to horizontal table....it give me this message....
XML error message: Open quote is expected for attribute "{1}" associated with an element type "border".
When i try putting what it want...then i receive another msg....
XML error message: Element type "table" must be followed by either attribute specifications, ">" or "/>".
Btw, The thing is ok when i try it at "Posting" HTML edit. Thanks....
Nitecruzr said…
Kel,

I'd like to explore this with you, but I think we can do this easier in Blogger Help Forum: Something Is Broken.
Lauren said…
Thank you for this information. Is there a way to force the table link to open in the same window instead of opening in a new one?
Nitecruzr said…
Lauren,

This should open in same window:

<a href="http://blogging.nitecruzr.net/search/label/Sunday?
max-results=100">Sunday</a>

This should open in a new tab / window (depending upon browser configuration):

<a href="http://blogging.nitecruzr.net/search/label/Sunday?
max-results=100" target="_blank">Sunday</a>

See:
blogging.nitecruzr.net/2006/07/image-test.html#HyperlinkNew
Manali said…
thnks a lot. it really helps a lot.
Márcia W. said…
Chuck,
thanks so very much for this! I wanted to make an horizontal bar for other reasons and managed to modify your instructions. Anyway, since I do not have a blog for testing I found a place where you can test your codes: http://duketown.com/marcel/htmltest.shtml.
See you in the blogosphere!
J Rodney said…
This is awesome! Thank you! I was looking for a way to do this as adding a gadget instead of messing around with the HTML. This makes it so much easier to adjust. Thank you!
Chase said…
Great post. How would you change the font color to white, so that it can remain separate from the links color in my blogger layout?

I changed the links to white so now the ones in the posts are not visible due to the post background being close to a white color.

Link to blog - http://anathletesdomain.blogspot.com/

Let me know, thanks!
Harvey44 said…
Nitecruzr - this is very helpful. Especially because you can mix labels and pages together.

When I put this widget under my toolbar I'd like the font to be lighter (it's almost the same color as the background) and I'd like the background to be the same color as the headler background (I have rounders 3). Could you help me with that?
Nitecruzr said…
Harvey,

If your blog uses a Designer template, and you install your custom gadget, you use the Designer GUI to control tab background. If it uses a Layout template, you use "Fonts and Colors".
Harvey44 said…
Sorry if I posted this twice. Not sure.

I don't know enough to understand your answer. I don't think I have a designer template. Not sure if my gadget is custom. (?) I'm not sure what fonts and color is.

I know I'm not much help.

When I create the widget in the footer it looks as I would like. In a white typeface, and integrated into the footer box. WHen I move it to the top underneath header the font is dark blue and in a space that is created between the header on top of the post area.
Nitecruzr said…
Harvey,

Here's where I suggest that you post your question in BHF: Layout & Templates, so we can explore your question in detail.
Harvey44 said…
I did post it over there, and at the same time I figured it out. :)

Now the only issue I have... he links that are blogger "tags" are showing may results - sometimes as many as 15 when I only want to show 5.

I played with the max results number to no avail. And the odd thing is that the number of entries displayed varies, for click to click even when I don't change the max result number.

I would "think" that the number of entries would be governed in SETTINGS under FORMATTING but that seems to have no effect. ?
Nitecruzr said…
The "Show at most" setting is for main page size, only. There's no setting for either archive or label retrievals. The last time I checked, archive / label retrieval size was 20, less of course, auto pagination.
Created the horizontal link bar and it looks super, thanks! HOWEVER, clicking on the links results in "Internet explorer cannot open the page". I used the code from your tutorial, above, but put in my blog address and labels. What'd I do wrong? Thanks man.

(This is the blog under construction: www.loveandserverecipes.blogspot.com)
Nitecruzr said…
Bob and Meredith,

Check the URLs behind the links! "loveandserverecipes.blogspot.com" is what you want, not "loveandserverecipes.blogger.com"!
Ahh!! All fixed now. (blonde moment!) Thanks!!!
Now, I would like to change the font size. I've tried everything, been over and over my html, changed various px values... Clue me, pleeeze? Thanks man.
There is no option for changing label size. The only way to change it is by changing body text size, which I want to keep as-is. In fact the label size as it shows in the horizontal index is smaller than the body text, and looks really sad. Is there some way I can change just the index text?
K said…
Where do I paste this code within the html?
Nitecruzr said…
Where do I paste this code within the html?

Do you know yet how to create a new HTML gadget?
JeremyDyen said…
I have been using this great add-on. Thanks. However, the last two label links in my menu bar are not working. I have gone through the code and everything looks okay, but something is not working right. Can you help please?
Anonymous said…
what does this number 7 in the above code means?

table cellpadding=7

what is the number 7 means here?

i want to create more than 100 horizontal link list at the bottom of my blog using your horizontal code above. but this number 7 confuses me...if i create nearly 100 horizontal link list should i change this number 7 to 100?
TyAnn Clark said…
Thanks so much for posting an easier way to do this! I've got my horizontal bar, but can't figure out how to make the content different under each one. What am i doing wrong?
Knitty said…
As a newbie to learning code, I copied your code to create a horizontal index and exchanged your info with mine. I'm beginning to understand what some of the code is saying (how it works) and played with changing the padding and border to see where that got me.

As a hobbyist, I am using labels to successfully have posts appear on pages dedicated to knitting, paper crafts, etc based on your days of the week example.

My question is about the "Home" tab. If I select Home, I get the message: No posts with label Home. Show all posts. I understand why that happens - no posts have the label "home".

Is there a way to have "Home" take the reader to my homepage with the extra step of reading that message and choosing "show all posts"?

Thanks for what I have learned so far. I look forward to learning more.
Nitecruzr said…
Knitty,

When you create the entries in your horizontal index, you add the URLs that you need.

If you want a "Home" index entry pointing to the main page of the blog, that's what you use. You use the URL of the main page of the blog.

My example uses "blogging.nitecruzr.net/search/label/Home?max-results=100" as the URL for my Home tab, because in my example, I had a "Home" label defined. If I wanted to index my main page, I would change that to "blogging.nitecruzr.net".

Simple enough?
Knitty said…
Thank you so much! Last night I kept taking out too much and either losing the Home tab completely or having it remain ineffective.

Clarification from you and a little sleep are marvelous things!
Lady In Read said…
thank you so much.. i have been looking for a way to add a horizontal index and am going to use your detailed instructions..
Tom said…
Thanks for posting this - it works great for me in an HTML widget!
I used a combination of links to static pages and label search pages.
http://progressive-charlestown.blogspot.com/
Elizabeth said…
Thanks for posting this!

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".