Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 10, 2007

Digg This Story

Horizontal Menu and Navigation Bar

Many web designs use horizontal menu bar and navigation lists which allow users to easily access the pertinent information in their website. While Blogger makes it simple for you to create a link list through their “Add a Page Element” function, the list is displayed vertically. We shall discuss how you can change that into a horizontal link list, and more specifically, use that as a navigation bar in your Header. We have also included some examples of how you can make the links dynamic by changing the colors, hover and background effects and customizing them to suit your Blog layout.

Before we proceed, it might be helpful for you to understand something about Numbered List and Bulleted List and the various attributes that can apply to the code.

Horizontal Link Lists

1. Apply to all link lists and label lists

If you want all the link lists and label lists in your sidebar to be displayed horizontally, go to Template -> Edit HTML and scroll to where you see this and insert the code (shown in red):-

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline;
}


In some templates, you may insert the code here:-

.sidebar ul li {
display:inline;
}


Preview the template. This is what you would see.

Horizontal Menu Navigation Bar

2. Apply to one specific list

Instead of having a style that applies to all the lists, you may want to have only one of the link lists appear horizontally. First, you need to create that list by going to Template -> Page Elements -> Add a Page Element. Choose “Link List”, add your items and save.

Now is the tricky part. You would have to locate that particular segment of the code where this list appears and find out the widget ID for that list.

For discussion purposes, let us assume that we want the link list titled “My Blogs” in our left sidebar to be displayed horizontally. We go to Template -> Edit HTML, and check the box that says “Expand Widget Templates.”

Next, we searched (Ctrl-F) for “My Blogs” and found this section:-

<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>


From here, we know that this link list has been assigned an ID LinkList2. To define a style, we went to the /* Sidebar Content */ portion of our template and included this code (Note: the code can be inserted into any part of the <head> section but for ease of reference we have inserted it here):-

/* Sidebar Content */

#LinkList2 li{
display:inline;
}


This is what we got:-



Only this list is displayed horizontally. The other lists are not affected. If you want this style for the labels, do the same. Locate the widget ID which is likely to be id='Label1' or id='Label2' and then insert the code:-

/* Sidebar Content */

#Label1 li{
display:inline;
}


Text Link Menu Navigation Bars

With this basic understanding of how the “display:inline” code works, let us now combine this with hover and link effects to customize our very own horizontal navigation bar. Again, if you are truly keen to do something unique for your Blog, peruse the discussion in Links Hover and Rollover Effects to understand the different styles that can be used to make the links more dynamic.

1. Simple Navigation Bar

We want a row of text links pointing users to certain important parts of the Blog. The links blend into the Header and will look like this:-

Horizontal Menu Navigation Bar

In Template ->Edit HTML, insert this style definition under /* Header */:-

/* Header */

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}


Other than the display:inline style, the other variables can be changed. You can have a larger or smaller font. The margin and padding set the space in between the words and can be changed. If you want a border around the word, set the border value to at least 1px.

Scroll further down the template and check if you see this:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>


If the number of maxwidgets is set to “1”, change it to “3”. If the showaddelement is “no”, change it to “yes”.

Save the template. We shall now create the list. Go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The link list code you can add is as follows:-

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Music page">Music</a></li>
<li><a href="URL of Books page">Books</a></li>
<li><a href="URL of Links page">Hot Links</a></li>
<li><a href="URL of Profile page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>


Insert the relevant words and URL links into the above example. If you want to link to a label, click the label in your sidebar to obtain the URL for insertion into the code (shown in blue). The URL should look like this:-

<li><a href="http://tips-for-new-bloggers.blogspot.com/search/label/Three%20Columns">Three Column Templates</a></li>


This link widget can be moved about. Try placing it below the Header and then above the Blog posts to see the difference in the layout. Preview the template and save it if you like the new horizontal navigation bar position.

2. Adding Link and Hover Effects

We have now a simple horizontal navigation list. Let us make it visually attractive and distinguish these links from the other links in your Blog. This is done by introducing the hover and rollover effects. For example, in addition to the above code we added into the template, we can have these as well:-

/* Header */

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#newnavbar li a{
color:#dfffed;
}

#newnavbar li a:visited {
color: #57E964;
}

#newnavbar li a:hover {
color: #F88017;
background: #ffff66;
}


In this example, the links are light green in color, visited links turn into bright green and when you hover your mouse over the link, the text is orange with a yellow background. Try changing to different set of color combination by inserting the appropriate color codes.

The resulting navigation bar will be this:-

Horizontal Menu Navigation Bar

3. Menu Bar below Header

As mentioned, the horizontal Navbar can be in the Header or aligned just above the Blog Posts. There is yet another position where you can place it, i.e., below the Header and above the Blog posts and sidebars. In the new Blogger templates, you should see this:-

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>


Change the showaddelement from “no” to “yes”. In Template -> Page Elements, you should be able to see an additional slot between the Header and the Blog posts where you can insert Page Elements.

Image Link Menu Navigation Bars

1. Simple Navigation Bar

If text links are still too unexciting for you, try having image links instead. Do up some small little images to represent the different parts of your Blog that visitors can go to. You can search the net for free downloadable images, create new ones, or edit and resize current ones with image editors like Picasa. Once you have these images, host them on a free image server and take note of the image URLs.

The modification to the template is similar to that of text links. In Template ->Edit HTML, insert this style definition:-

/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}


The space in between the pictures (padding) may be changed depending on the number of images and the size of each image.

To add the horizontal row of navigation image links, go to Template -> Page Elements -> Add a Page Element and choose to add HTML/JavaScript in your Header. The image link list code you can add is as follows:-

<div id='newnavbar'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Links page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>


The portions of the code in blue are the addresses where you want the users to be directed to. The parts in red are where your images are hosted on an image server.

This is how the neat horizontal picture navigation bar can look:-

Horizontal Menu Navigation Bar

2. Adding Link and Hover Effects

We can throw in some effects into the picture links. Just to give you an example, we added this hover links code in addition to the above:-

/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#newnavbar li a img{
height:30px;
width:30px;
}

#newnavbar li a:hover img{
height:40px;
width:40px;
background: #ffff66;
}

#newnavbar li a:visited img{
height:40px;
width:40px;
background: #6D7B8D;
}


What we had done was to fix the navigation bar image link size at 30px by 30px. There is no border around the image. When the mouse cursor hovers over the image link, the image is enlarged to 40px by 40px with a yellow background. Any visited links will have a grey background behind the image.

Horizontal Menu Navigation Bar

While this looks interesting to have, do note that any change in image size also affects the surrounding text alignment. You can reverse it. Change the hover and image sizes to smaller values so that the images 'shrink' when the mouse hovers over them.

Update:

Navigation Bar within Header Image

A number of us have uploaded background images into the Blogger Header. After adding a Text Link or Image Link menu bar, you may notice that it is positioned either on top or below the Header image. You may have designed the image with a space reserved for the Navbar, either at the top, bottom or to the side. To adjust the position of the Navigation Bar and have it within the Header Image, refer to our article Add Navigation Bar in Header Image.

There are numerous dynamic styles that you can try. If you have followed our guides, you would at the least have an idea how you can tailor-make yours. This is an introductory article. We may follow up with another one on multi-level tabs.

In designing your layout, avoid having too many gimmicks. Stick to one or two nice hover effects and if you'd like, change the color scheme every few months so as not to bore your regular readers. Go ahead, try it and have fun creating your own Navigation bar!

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

75 comments:

CrazyKinux said...

The bar displays, but it does so below the header image. I'd like it to be at the bottom of the image. How can I do that.

Thanks for the tip by the way!

bizwhiz said...

Hi CrazyKinux

Just addressed your query in a new section of the article. You may like to try it.

netbobz said...

Hi bizwiz!

Another great post, congrats!

I was always coming back to your blog to check for new articles, but wasn't finding any. Later I discovered this post accidentally while going through your right sidebar. I guess others might also get deceived like this. So why don't you change your main page to point to your recent posts?

bizwhiz said...

Hi netbobz

We are going to do a little revamp to make it easier to locate the articles, starting with our FAQ site. Thanks for the suggestion.

diddy47 said...

hi...god article...i don't suppose there is a way to do a horizontal label display 9 or link display) using widget ID and not HTML page elements...I've been working on this for some time now...any help.......http://kundaistreet.blogspot.com/2007/08/horizontal-label-displaysos.html

bizwhiz said...

Hi diddy47

In our article, under Horizontal Link Lists - Apply to one specific list, we gave an example of how you can create a horizontal label list. In doing so, only the label list is displayed horizontally without affecting the other links. This is probably what you are looking for.

After having a list, it is for you to decide whether you want to add hover and mouseover styles to it. We have some guidelines in the article too.

BeBopGrandma said...

Hi me again. lol Well i got the navigation bar inserted but there verticle. How can i get them horizontal? here is my page http://bebopgrandma.blogspot.com/

BeBopGrandma said...

I figured it out yipee!!! for me. lol

Samhita Sarma said...

Navigation is nice.I want to ask you one thing.When I insert an image into my blog I am getting an X mark in my blog.How can i locate the image I want to insert into my blog header.

bizwhiz said...

Hi Samhita Sarma

Since your query is a pertinent one raised by a number of Internet Explorer users, we have discussed the possible causes in detail in our article Images not shown in Internet Explorer.

Nate said...

Hello,

Is there any way to change the default padding for the widgets? I added a horizontal navbar and it's perfect for my site, but I wound up with a lot of white space on the top and bottom (which I am sort of trying to overcompensate for right now with some design tricks).

Take a look at the link below and you should see what I mean.

http://burritobracket.blogspot.com

Thanks,
Nate

bizwhiz said...

Hi Nate

You seemed to have already reduced the padding in the #header h1 { to 0. Perhaps for the margin in the #newnavbar ul li{ you can insert a 4-value rule. If it is one value like "margin:15px;" there is a margin of 15px on all sides. In this instance you may want a margin on left and right only. So maybe try "margin:0 15px 0 15px;"

If you have a Header description, the padding in #header .description { can also be adjusted to reduce the white space.

D. Elizabeth said...

Hi Biz! Do you know a hack for modifying the label display bar that comes up when you click on a label (the thing that says, "Showing posts with label ___")?

I'd love to change it to say something more personal like, "Here's everything I have to say about ___"

Possible?

p.s. you ROCK

dom-cin said...

bizwhiz... is it possible for the bar to be embedded in my header picture so that my layout would not be ruined? huhuhu... the navigation bar only appears either above or below my header picture. i don't prefer like the look.

bizwhiz said...

This comment has been removed by the author.

bizwhiz said...

Hi dom-cin

We have addressed that in this article Add Navigation Bar in Header Image. It should explain the alignment settings to have the Navigation Bar within the Header image.

Jazmanie said...

This site completed my blogging needs. Thanks and congratulation for your high achievement. Your site is my reference and guide.

I admire how you neatly arrange all the blog directories on the left sidebar (all the small 80x15 buttons side by side), how can we do that, is it using same procedure as link list? I've tried but didn't work. help please.

bizwhiz said...

Hi Jazmanie

They are image links. You can have a look at our article Hyperlinks and Image Links for the image link HTML code.

The Beading Gem said...

The directions were very easy to follow. Love it the way it is on my blog. Thanks.

Ashley said...

Thank you so much for this tutorial, but I have a problem! My third link in the list is showing up as a bullet! Can you help? Thanks!

alayfield@gmail.com

Toni said...

I created an image in photoshop with the text for the links in the image. How do I replace my current left sidebar links with this one image and arrange the links so they will line up with the text in the image? I've searched all over. There are lots of codes for doiing this on other websites but not Blogger. There are alot of tutorials for making photoshop created menus. I'm using the minimal black template with a three column layout.

bizwhiz said...

Hi Ashley

You have a private blog which we cannot view and thus do not know what the problem could be. In any event, if you are unable to find out the cause, you can always remove that link and create another. To identify or change the bullet link code, you can also look up our article on Numbered List and Bulleted List.

bizwhiz said...

Hi Toni

I read from your post that you have found your solution from various forums. We shall therefore not comment further on this.

This is Sijo Kodiyan said...

Hi me again. lol Well i got the navigation bar inserted but there vertical. How can i get them horizontal? here is my page http://pictip.blogspot.com/

bizwhiz said...

I see a link list but no navigation bar. Anyway, follow the guidelines in our article to create a horizontal list.

Matt said...

Hey bizwhiz. As usual, your site is awesome. :) I have a question regarding the Horizontal Navigation Menu. The template I'm using creates a "blue dot" when you use bullet points. And I understand in order to keep the links separated, these bullet points are necessary. But with my template, it makes the links "not look nice" (for lace of a better term). You can see what I'm talking about on my test blog: http://mjctestblog.blogspot.com
Do you know if there's a way to get rid of those "dots" or maybe somehow make it look more appealing, like appearing beside each link instead of "behind", for example... Anyways, I'm sorry if that was a bit confusing. Keep up the awesome work with this awesome site. :)

bizwhiz said...

Hi Matt

You want to get rid of the dot? Go to .sidebar li in your template and remove the image link.

Matt said...

Thanks bizwhiz. Your site, again, is just incredible. And your responses are highly valued. Keep it up man. Great stuff. :)

Matt Plavnick said...

This is a great post. I've had success installing the new bar, but I'm also getting a border around the whole page element that I can't figure out how to remove. Tips?

Thanks for all the great advice.

bizwhiz said...

Hi Matt Plavnick

You may refer to this article to understand how you may Add or Remove Borders in CSS Templates.

bluretina said...

I tried to put link menu at footer with this method. I think I managed somehow but I can not figure out how to manage padding between the links, colors, highlight effects etc. they do not work. any ideas?

my blog is http://arcibi.blogspot.com

thank you.

bluretina said...

ah I made it >_< thanx anyway. this is great content. I'll put up a link of yours on arcibi now. cheers!

anuj said...
This comment has been removed by the author.
shashi kiran said...

hi,

i created a navigation bar, but im curious to know if i can add a drop down menu for the items in the navigation bar. can you please tell me what i could do about it.

thanks

Ashu said...

Hi bizwhiz,
I created a horizontal navigation bar in by blog http://pctonic.blogspot.com/ following your instructions...but I would like them to start from the left corner and not from the center ..how do I do that?
Thanks!
:)

P.S. Thumbs up to your AWESOME blog!

Max said...

Hi bizwhiz, thanks for the post. Well am here with a new question which i suppose is not off topic. I tried to create one horizontal navigation menu in flash. here is the link if you want to check it out http://r.teamintraday.googlepages.com/menu.swf
But now the problem is i cant set it in my blogger coz of zindex value. I want it to be transparent and overwrite other contents in blog. Have a look at my website www.intradayteam.com i already have a flash header in my site. Now i want to put horizontal flash menu exact below my flash banner header.
If am trying to put horizonal menu.swf with normal flash code in blogger, lot of space remains empty between menu and content.

I searched all over internet but did not find anyways to set a horizontal menu with zindex figure to set it in blogger.

You are my last hope. Help me out if there is any way. Thanks for your blog. it supports me a lot.

Erika said...

Hi Bizwhiz,

Thanks for you post! I'm new to all this and your website has been the most helpful tool I have found so far. I really appreciate it!

I'm having what I'm sure is a really simple problem. I tried to put in a basic horizontal navigation bar under the header. It's showing up, but whenever I click on the links, nothing is happening. What am I doing wrong? Thanks!

natalie said...

LOVE this site! Great article too! But I have a problem. I'm on the old blogger. Is there a way to do this there? I don't want to screw everything up by changing over! I did get this to work great on my practice blog. But my real one is all the old HTML template. Any thoughts? Here's my link:
http://www.seejanescrapbook.blogspot.com/
I really need my buttons on the sidebar to go across the top but underneath my header. Let me know what you think if you get the chance!

Matt said...

Thanks. I just have 1 problem in that the links are sometimes invisible. When I scroll down the page and then back up they re-appear but then they often go invisible again when I move the cursor anywhere near them.

Do you have any ideas? They would be much appreciated.

Herbert Wong said...

Great hack!! I wonder if you can put up a tutorial to have a drop-down menu for each of the button on the navigator? eg. if I use labels as one of the button, when the mouse hover over it, it will list all the individual label in a drop down list. That will be cool. Thanks.

Herbert Wong said...

This is a fantastic feature! Part of what I am looking for. I am keen to find out if this feature can be extended with a drop down tab?
eg. I have 10 labels by country, 5 labels by subject and 5 labels by animals. What I like to have is 3 headings (post by country, subject, animal)across the top horizontal row with each one having a drop down tab to the individual label. That would be perfect!
Would be thankful if you can modify this navbar to do so. Thanks very much.

Anonymous said...

HOW DO I CREATE A NEW PAGE WITH BLOGGER. I WANT TO LINK TO A NEW PAGE USING THE MENU BAR BELOW THE HEADER. HOW DO I CREATE THIS PAGE AND GET THE URL?

New Jack said...

I LOVE YOU! IT WORKED PERFECTLY!!! You've helped me change my entire blog to what I want it to be by MYSELF. I've been bugging people for HTML help forever and I was able to do something for MYSELF, which was real nice :)

Herbert Wong said...

I have tried to merge this wonderful havk with another, a dropdown menu genrator (http://www.htmlbasix.com/dropmenu.shtml) to create a few dropdown menus just underneath the header.Basucally I followed your instructions but put in the codes generated from that site into the new Page Elements.However I could not get the 2 dropdown menus to stay horizontally on the same row-instead it stack one on both of another. This was despite having the display:inline code in the template and ul and li codes in the Page Elements's html/js. Can you advise please?? Thanks.

Michelle said...

Hello! I just wanted to let you know that I've used many of your tips to play with my blog's layout, and I appreciate the instructions very much! They are always helpful and clear. Thank you!

Anonymous said...

Thanks so much for this! i will definatly make a link or post to your page! thanks so much

chris

Rodrigo PĂ©rez said...

This is awesome! I used this with other tutorials and a bit of myself and a got this: http://soyrodrigoperez.blogspot.com/ (its in spanish)
I just want to enlarge it both sidebars to make it fit the window and also make it sound when you pass the mouse over the horizontal list.
If you could help me it would be great so thank you.

gurnygob said...

sorry to come by the back door with this comment.
I was wondering why I never see you at the help group any more.
miss your input.
gurnygob@msn.com

Nymeth said...

For some reason I just can't create an horizontal link list at all. The "display:inline;" code simply won't work. It's particularly strange because I have my label cloud showing horizontally and there were no problems there. Any idea of what might be going on? Thanks in advance!

Mrs. Accountability said...

Thank you so much for these helpful tutorials!! You have done a fantastic job, they are very complete and thorough. Some tutorials leave out little steps that some of us don't know to do without the guidance. Thank you again!! Mrs. Accountability

Ahuna said...

hi bizwhiz , i have been following every single one of your posts , i have to thankyou because of all the efforts you make , only one question i had , how can i hide my css source code , so that no one can view it either by hitting the view source button or any other way ? thanks alot , i appreciate this

KARL NOVAK said...

Hello there, Are you back from vacation? Hope you had a great time.
I try to have ans horizontal menu and I follow your instructions, but the background is missing and all the links are toghether so doesn't look very good. I don't know how to customized it. I am ok with the text instead of the images.
My blog http://karlnovakphotos.blogspot.com/

Thank you , K

shockresistant7 said...

thanks for the great tutorials - however i'm still having some problems with mine
the link is shockresistant7.blogspot.com
i want all the links to join up seamlessly with the header, as well as with the other links and not overlapping each other.
i've tried adjusting the margins and padding but it seems llike it applies to the whole navbar instead of the individual link images...

thanks in advance

r1ooooo said...

This is really helpful. Thanks alot.

Anonymous said...

How to add Simple Navigation Bar to blog header Image.
I try your way but all the link show under the Image & I want all my links inside the header Image.

Thanks.

MM said...

Hi! Thank you for teaching how to make the horizontal navigation bar. I've been searching how to do it forever.

I have a question about the urls hyperlinked to each tab on the bar. In some other blogs after you click on the tab, it's redirected, not to the labels (http://xxx.blogspot.com/search/label/Downloads) but to an index html(http://xxx.blogspot.org/2007/09/index-moviez.html). I'm wondering how I can get the index for my own blog. Do you know how to do that?

Thank you very much

G M said...

hey biz...i have problem with header.
i have posted a navigation bar in header according to ur blog.but i got it below the header.........i want it in header.

epmguru said...

You are the REAL GOD of Blogger!! Your tips have helped me in transisoning my oldtime blog to a new avtar.

I am really really thankful to you guys. Dont have words to express my plesure. The way you have explained the tips..is so helpful.

Please pay a visit to my site to have a look.

Thanks
www.epmguru.com

Anonymous said...

This is really cool. Thank you!

I have a question. I am using the navigation bar in my side bar for link effects. The when you hover over the link the words become underlined. The code doesn't say it is, and I don't know how to get it off.

Bryan Scott said...

Excellent post--I'm glad I found it.

I'm having a little bit of trouble figuring out, though, how I can have hover effects in the menu bar with custom created graphics.

I realize two sets of these graphics would be created and uploaded (one for regular and one for hover), but I don't know how to relate them in the html code.

Thanks!

Bryan Scott
winnipeglovehate.com

Green Peas Photography said...

Thanks so much for your instructions - I was able to create a horizontal menu with a hover - my only question is it looks a little off centre (too far to the left) - can you give me any suggestions on how to fix this? I've tried playing with the px ranges but nothing seems to reduce the space on the left :-(

www.greenpeasphotography.blogspot.com

thanks!

Ekxodus said...

Hi,

Your blog is such a great help. Check out the menu(s) I've created in my blog

Though there's only two (2) menus available as of this moment, at least I got the perks in creating my Menus.

More power to your blog!
Ekxodus!

Alan said...

Help! I added the horizontal bar, but i have a lot of white space around it that i can't remove. I want this to be the same blue as the background. Also the link images seem to be a bit off centre??

http://alan-travels.blogspot.com/

3 REXES said...

Wow! Last night I spent a good 2+ hours & still couldn't get my nav menu to work... but your direction was easy & clear! now I have a nav bar... Thanks!

Any Idea on how I can make the links open in a new tab/window?

Tara * 3 Rexes
http://3rexes.blogspot.com/
http://www.threerexes.com

shuey said...

Hi, this is great, I managed to create a navbar for my blog, thanks a lots.

Shusha said...

Thank you!!! :)

Michael Ross Allen said...

I have my list up on my site, but it lists vertically. Can you help me out? I believe my list is in the crosscrol portion of my HTML...
-Mike
www.28dayslateranalysis.com

Anonymous said...

I am trying to place my nav seperate from heading but cannot find the place needed in html, the crosscol-wrapper etc...

any ideas?

Nazbir said...

Thanks a lot brother , i have use this tutorial to put navigationbar on my blog , i think i have placed it perfectly , you can check it out at www.deshimobiles.co.cc

Thanks again

Glenn said...

Fabulous tutorial and worked great for getting a navbar in the header. Only problem is that on IE the navbar does not show up. Everything looks great on Firefox. Any suggestions?

http://coreagiletechnologies.blogspot.com

Miguel said...

Hello,

I would like to reduce the hight of my header, can you please tell me how to do it?

Thanks in advance.

Miguel
http://miguellomelino.blogspot.com

flipsix3.co.uk said...

Hi bizwhiz, first of all just wanted to say thanks for a great site which is helping my latecomer blog immensely.

However I'm struggling on the horizontal navbar/link-list issue.

Although I've inserted the style definition under the /* header */ lable, and inserted the HTML/Java Script element with the code provided, I just can't seem to get a horizontal alignment to save my life.

Undoubtedly something simple that I'm missing, but if anyone gets a chance to look at...

www.flipsix3.co.uk

I'd be grateful for a pointer

uni said...

I bookmarked this page and trying step by step to make sidebar similar to yours.Thank you for the tips!

flipsix3.co.uk said...

Hi again bizwhiz

Re: yesterday's enquiry - tried a few variations and couldn't find where I was going wrong so for the time being I've removed this element from my blog.
I'll come back again when I've played around a little more.

Thanks for a great site!

lia said...

Hi,

I have two navbars on my blog, one for links at the top, and one for links at the bottom. I've found that each navbar will use the info (such as margins, colors) for the other navbar interchangeably. By changing the start of the info for the codes (#newnavbar) to #newnavbar2, I thought it would distinguish the two and stop them from sharing information. It didn't work, and neither did #navbar2. Do you have any advice for distinguishing two navbars or more?

Thanks.