horizontal nav with gadgets

Horizontal Navigation Using Gadgets

The layout menu allows you to inset navigation below the header.Select the "Add a gadget" immediately below the header. Scroll down and choose any of the link lists. For example, I choose link list. Hit the plus button. The configure link list menu pops up. Don't give the list a name. The reason is that you want only the link names to appear. Finish the menu box with as many links as you wish to appear in your horizontal menu.

Now, if you save the layout, you will notice that when you view the blog, the link list will appear underlined with bullets and in block form. The reason for this is that this is the default css for an unordered list, which is what your link list is. Links are underlined by default. To create an inline list and remove the bullets, you will have to apply the inline code to the ul and none to the li element. Finally, if you want to remove the underline from the a element use the property none.

So, that your property changes don't apply to all list and link elements, give the newly created navigation a div tag with its own unique id or class, i.e. "topNav". Then, in the style section, apply the appropriate css to the topNav id or class. Do so for the ul, li, and a elements to change the properties to inline, none and no underline. Get the specific css to use.

meta tags

The best article on creating meta tags is from Blog Know How. Read it and the comments that follow.

You will need to edit the layout and specifically, the html. Take care to "Check the Expand Widget Templates box".

The meta tags are placed in the head section immediately below the title. Note that I am not using a meta tag below as blogger does not accept the tag.

[b:if cond="data:blog.url == data:blog.homepageUrl"]
[meta content="Place your blog description here" name="description"]
[meta content="Place your blog keywords here(separated by commas)" name="keywords"]
[/b:if]

menus - navigation - horizontal navbar

Add top navigation - horizontal navbar

This is a two part discussion in how to add top navigation to your blog. We will be creating horizontal navigation, placing it at the top of your blog, and finally styling it.

There are literally hundreds of sites that give the html and css to create menus for your site. CssPlay by Stu Nichols is a good example of a collection of menus from which to choose.

The menu itself is html using an unordered list, where each list item will link to a specified url.

The styling of the list items and the links is achieved by the use of css. A long explanation is not warranted here. Suffice it to say that the "inline" declaration will change the appearance of the list from a vertical block to horizontal. For a step by step explanation in how to create and style a horizontal menu check out 456BereaStreet.com.

the header image

Find an image that you like.

In photoshop add some text such as your blog title and description. Size the image to your width requirement or just check "shrink to fit" when you edit the header in layout. Upload and you are done/

start with a template

To make this blog you can start with a template that blogger provides, or ...

1. Find a template that inspires you. Mashables lists 50 template designs that kick ass. Check it out.

2. When you find the template you like, download the xml file to your computer.

3. On your blog dashboard go to your Blogger dashboard and go to Layout, Page Elements> Edit HTML.

4. Look for the section near the top where you can browse for your XML template:

In the end, I stuck with a blogger template because the mashables either didn't fit what I needed or they had coding errors.