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.
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.
Not bad, but we can do still better. This sort of table looks better centered, and with a border.
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
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.
| Home | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
<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.
|
<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>
|
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
- The home page of "Robertos Blogs".
- My home blog, "Nitecruzr Dot Net".
Comments
Another asset for the armoury.
Bob
Thank you for such good work!
Cathy
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.
Thank you for the help and great add-on.
http://www.mommysonlinegaragesale.com
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
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.
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.
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....
I'd like to explore this with you, but I think we can do this easier in Blogger Help Forum: Something Is Broken.
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
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!
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!
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?
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".
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.
Here's where I suggest that you post your question in BHF: Layout & Templates, so we can explore your question in detail.
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. ?
(This is the blog under construction: www.loveandserverecipes.blogspot.com)
Check the URLs behind the links! "loveandserverecipes.blogspot.com" is what you want, not "loveandserverecipes.blogger.com"!
Do you know yet how to create a new HTML gadget?
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?
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.
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?
Clarification from you and a little sleep are marvelous things!
I used a combination of links to static pages and label search pages.
http://progressive-charlestown.blogspot.com/