This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. 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.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

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

Sep 10, 2007

Digg This Story

Add Navigation Bar in Header Image

In our article on Horizontal Menu and Navigation Bar, we have given you a how-to guide on adding a horizontal navigation bar into the Blog template. This Navbar can be text links, image links, or both. Since they are navigation tools, they should be somewhere at the top of the page and easily noticeable. You may have a background image in the Header and after adding the Navbar, you find the Navbar sitting at the top or bottom of the Header. Perhaps you want the Navbar somewhere in the middle of the image instead. In this article, we shall explore further customization tips on aligning the Navigation Bar and moving it to the exact position within the Header.

Header Image using Blogger feature

If you have inserted the background image into the Header using the 'Edit Header' method, and added the Navigation Bar, you will see the Header image and the Navbar as 2 separate items like this:-

Add Navigation Bar in Header Image

This is because they are different widgets, i.e., the Header image is comprised in the Header widget whereas the Navbar is in the HTML widget. One comes after the other in the layout. To move the Navbar further up so that it is within the Header image, we can set the top and bottom margins of the Navbar widget. If you have inserted the Navbar through our tutorial, you would have remembered that we called the widget “newnavbar”. Go to Template -> Edit HTML and add another code:-

#newnavbar{
margin: -80px 0 80px 0;
}


There are four values in the margin setting. They are respectively the top margin, right margin, bottom margin and left margin. By indicating a negative top margin value, we are shifting the Navbar upwards, into the Header image. The result is the menu bar within the Header like this:-

Add Navigation Bar in Header Image

If you want the Navbar further to the right, put a negative value to the right margin setting. Similarly, if you want to shift the Navbar to the left, indicate a negative left margin setting. Since image sizes and template styles differ, you would have to try out different margin values to find an optimum setting for your template. Preview the template to see the new layout.

Header Image by modifying stylesheet

The second way to insert the background image into the Header is the 'Modify Stylesheet' method. This is done by uploading the Header image onto a server and placing a link in the Header style:-

#header-wrapper {
background-image: url(URL of image);
}


Once you have added the Navigation Bar, you would notice that it is positioned immediately after the Blog Description, and it is within the Header image.

Add Navigation Bar in Header Image

This seems to be what you want, as the Navbar is already a part of the Header image. However, there is still a need to fine-tune the position. For example, you can see that our picture in the center of the Header image is 'cut off'. Our image height is 400px but since the Title and Description do not take up much space, the Header image is not fully shown. If we want to show the entire Header image, we can insert a height specification into the header-wrapper definition like this:-

#header-wrapper {
background-image: url(URL of image);
height:400px;
}


Next, as we had mentioned, the menu bar is after the Description and within the Header. We want to move this downwards so that it is at the lower part of our Header image. Same as before, we insert another style definition for the “newnavbar”:-

#newnavbar{
margin: 400px 0 0 0;
}


This time, we want to shift it down, so we add a positive value to the top margin. There we have it, a full Header image, and the horizontal Navigation Bar at our desired position within the image.

Add Navigation Bar in Header Image

© Tricks 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

27 comments:

Angela said...

First let me say thank you for building such a geat site. It has helped me a lot!!

Second, how can I align the navigation bar to the left? I want it to fit above my posts. My url is http://livemorewantless.blogspot.com. Thanks!

Ang.

Bubbles said...

Thanks for ALL the tutorials, you guys!! I've been looking for this kind of stuff on the net forever. Anyway, could you maybe have a tutorial on how to get, like, custom bullets and whatever in the sidebar, and also how to get a three-column template?

TTYL!!!

m.o.b said...

is it possible to change the font size of individual text of the horizontal navigation bar?

. . . said...

Hello there!

I just wanted to know how to make additional page/s {e.g. HOME, ABOUT US, GALLERY, CONTACT US...etc.)

Thanks!
Mec

Anonymous said...

thankx broooo.........

Jack said...

This is very useful; thanks a lot! However, I have a question. I noticed that on both my blog and the screen-capture of what the blog should look like with the code, the navbar is shifted slightly to the right. Is there any way to fix this?

Anonymous said...

In my experience, this tutorial is only good for the navigation bar to be placed at the bottom of the header.

What if I want my navigation bar to be on the top of the header, not the bottom, what changes in html do I need to make?


Thank you!

Admin said...

I love this website:) Thank you soo much for making these amazing tutorials. You helped me soo much in redesigning my website zixpk.com.

STACI said...

I used your method to put a navigation bar on my site, http://www.justbloggled.com. It shows perfectly in Firefox, Opera, and Safari. However, in IE7, there is a space between my header (with the nav. bar within the header) and the sidebar and main wrappers. Do you know how I can fix this? Personally, I never use IE but my readers might.

Thanks, by the way, for your site. I use it constantly.

MMonday said...

I seem to be having some difficulty lining everything up. I know this is a fairly simple task but my header does not seem to be the same width as the rest of my blog. Help please: http://marketingonmonday.blogspot.com/

Thanks!
-MMonday

CartoonSteve said...

How about showing a working example? (along with your screen shots) ? since you didn't use this in your own blog header.

Luis Fernando Gonzalez Llinás said...

Antes que nada, mil disculpas por comentar en mi lengua nativa, pero mi ingles no es tan fluido al intentar expresarme. Y como deseo ser bastante claro, lo he preferido. He encontrado cosas interesantes en tu blog que me han servido muchísimo. Gracias por compartir. Tengo un pequeño problema y agradecería tu ayuda. La cabecera de mi blog la borre y fue cambiada por un banner hace días. Encime de el y siguiendo tus indicaciones de un post...he puesto el menú horizontal encima del banner e incluso le agregué una imagen de fondo para que las imagenes de enlace no se vieran tan flotantes. El asuntos es que el banner tiene en su margen superior izquierda unas letras que dicen que fue creado por una versión de prueba y me gustaría taparlas con la barra de menú. Lo he intentado de varias formas y no he podido. Si te queda fácil en pasar por el blog ( http://www.urositos-club.blogspot.com ) y mirar que solución se le puede dar me haces un gran favor. Saludos y nuevamente gracias por toda la información que das.

Farrukh said...

Thankyou Sir for such great websites. You have helped me alot to make my blogs better
http://googlepagerankincrease.blogspot.com
http://make-dollaronline.blogspot.com

ska [istivan] said...

Hi,

I am trying to put my links menu at the bottom part of my header. However the header image is staying in the foreground, with the links behind it.

When I tried settin the header image as 'behind the text' instead of 'replace' I got 2 annoying things:
1) the whole header moved to the left and down
2) the title of the blog appeared as text over the header image.

Any idea how I can solve this?

Cheers
ska

Melissa said...

My bar keeps going behind my header. So can't see it. any ideas??

shiori said...

Hi,

I used this method and it looks great in firefox and chrome, but the bar is off to one side in IE and safari.

Is there a way to remedy this?

Tardy said...

Hi - I wonder if you could help me - I've added a nav bar above my header but there's some distance between my header and the navbar - can I reduce that? I've tried adjusting the margin settings but it doesn't seem to get them any closer...

My site is http://tardymusic.blogspot.com/
if you want to look at the thing directly.

Thanks

Tardy

Tardy said...

Hi there

I'm having problems with getting all my icons in the navbar on the same line - why can't all 5 of my icons fit in? I've tried messing around with the margins/padding but to no avail!

Can anyone help?

Here's my site address if you want to see my problem in all its glory:

http://tardymusic.blogspot.com/

Thanks

Tardy

napnipnop said...

great site! thank you very much..

gene + experiments said...

Thank you so much! Your instructions are so easy to do.

I have a question though. I'd like to have some sort of an actual bar on the navigation bar, I was thinking more of the background color but with a bit of transparency on it just so I can still see the header image. I tried putting a "bar" on the navi menu but the background image/color stays just behind the texts.

Any tips on how to do that?

Mabel said...

HI, THANK YOU FOR THIS BLOG,IT IS SO HELPFULL, BUT I NEED YOUR HELP!!!

I MADE MY NAVIGATION BAR IN MY HEADER,WELL KIND OF, BUT I HAVE 11 IMAGES AND I WANT THEM AT LEAST ALIGN THEM 4 OR 5 PER ROW, I TRIED TO CHANGE THE NUMBERS IN THE HTML, THOSE THAT YOU MENTIONED -80 0 80 0 BUT IT DIDN'T WORK, ALWAYS ALIGNED IN THE CENTER, please help??? THANKS, MABEL
http://holamormon3.blogspot.com

Mabel said...

It is me again Mabel from http://holamormon3.blogspot.com

do you know how to put the navigation bar on the botton and on the left side of the header (2 navigations bar in the same header)
here is an example of what i am talking : http://createdbyjillscraps.blogspot.com/

ichako said...

thanks a lot for the tutorial !! :D

Sarah said...

Let me just say that I could not do this blogging stuff with out your site. I've used you for a few different occasions, and I always feel like I can do anything after you help me change up my blog. Thank you so much for sharing information!

Pradeep Kumar said...

Hi I have created a blog in which i have also created tabs but i don't know how to give backgroung color to all tabs on my blog please help me

Naeem said...

I want to put a navigation bar instead of "new post"and"older post".

Is there any way? :(

My ebooks site

Darci said...

AWESOME!!!!! Thanks so much for your info it really worked great for me.