Tuesday, October 07, 2008

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
>> Top

45 comments:

Roberto said...

Thanks, Chuck.

Another asset for the armoury.

Bob

THE SILENT ADVOCATE 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!!

Sew Midwest 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

Mom2my9 @ 11th Heaven said...

Oh my gosh! Thank you so much for this post! I can't wait to try this tonight. Really appreciate it.

Renata L.Lerch said...

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

Chuck 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

Chuck 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.

JB said...

Excellent. Thanks for sharing.

All Together Home said...

It seems so easy for everyone, but I still do not get how to add a menu bar

Chuck 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....

Chuck 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?

Chuck 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

Pakhi 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!

FrugalMom 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?

Chuck 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.

Chuck 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. ?

Chuck 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.

Bob and Meredith DeVoe said...

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)

Chuck said...

Bob and Meredith,

Check the URLs behind the links! "loveandserverecipes.blogspot.com" is what you want, not "loveandserverecipes.blogger.com"!

Bob and Meredith DeVoe said...

Ahh!! All fixed now. (blonde moment!) Thanks!!!

Bob and Meredith DeVoe said...

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.

Chuck said...

Font sizes are adjusted in the Advanced option in the Template Designer wizard.

Bob and Meredith DeVoe said...

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?

Kerin said...

Where do I paste this code within the html?

Chuck 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?

d 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.

Chuck 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..

TomRI 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/

Liz said...

Thanks for posting this!