Create a horizontal navigation menu using images on Blogger

A navigation menu is one of the most important things for any website or blog. Think of all the different areas on your blog – all the posts, pages and topics.

You want your readers to easily find their way around and to be able to find what it is they are looking for. A great navigation bar or menu can do this!

There are so many way you can add navigation to your blog like with a drop down menu.

Todays tutorial will show you how to add a horizontal navigation menu to your blog including images.

I don’t recommend using images for you navigation as they aren’t as user friendly and search engines can’t follow them as easily. Instead I recommend a styled text navigation, which you can do with a custom font.

Horizontal navigation menu to your blog using images

  1. Design your Images – Like with social media buttons, you’ll need to find some images to use. You could search online for some but if you’re going to use somebody else’s, you need to check their policies and copyright. You could create your own using GIMP (free alternative to Photoshop). Once you have your images, you’ll need to upload them to a hosting site such as Photobucket.
  2. On Blogger – Click Layout > Add a new gadget > HTML/Javascript and paste the code below, filling in your details such as size, links and images.
<table width="TOTAL WIDTH OF NAV BAR" height="TOTAL HEIGHT" cellspacing="0" cellpadding="0" border="0" id="Table_01">

<tbody><tr><td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 001" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 002" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 003" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 004" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 005" /></a></td>

</tr>

</tbody></table>

Horizontal navigation menu to your blog using images

  1. Similarly to above, you need to upload your images to a hosting site. Take note of the width and height of the images.
  2. On Blogger, click Layout > Add new gadget > HTML/Javascript and name it “NAVBARIMAGE”, you can delete or change this later. It’s just used to help with editing the HTML. The add the following code for as many links as you’d like. Add them one after another without any spacing, like shown. Fill in the details of the link and the width & height of the image you uploaded.
<a href="URL"><img src="DIRECT IMG URL 001" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL 002" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

Fixing the margins & padding for a horizontal navigation menu

On Blogger, click Template > Edit HTML and search for NAVBARIMAGE. You’ll see HTML#, note this. Close the Edit HTML and go to Template > Customise > Advanced > Add CSS. Paste the following code, changing # to whatever number is shown on your template. Margin-bottom will add space between the navigation bar and start of your blog posts. You can edit padding & margin depending on how you want it to look.

 HTML# { padding: 0px; margin-bottom: 10px; } 

Post last updated:

26 responses to “Create a horizontal navigation menu using images on Blogger”

  1. Wonderful post…your blog is very good.;)
    Maybe follow each other on bloglovin?
    Let me know follow you then back.
    Lovely greets Nessa

  2. Katy

    When you have to put the sizing in, what form is it? cm, mm, etc. I’m really confused! Thanks ๐Ÿ™‚

    1. Oh sorry, should of specified. The sizing is in pixels so it’s NUMBERpx ๐Ÿ™‚

  3. Wow thank you so much. I followed many a complicated dead-end link before I found you.

    1. Awh great, glad you finally got it working, looks great! x

  4. shabeer

    its really usefull

  5. Hi ! ๐Ÿ™‚

    After all, your site is super, really helpful. I followed your tuto and it’s work but i want to align my menu with the post body, you can see it on blog.

    Can you help me for please ?

    xoxo

    1. Hello, you can alter the code widths and padding but a good idea would be to find the size of your blog content and create the images so that together they equal that width. That will give you the best effect.

  6. Wow, thank u so much for this awesome tutorial to create navigation with images on blogger, very usefull ^^

  7. Is there a way to make the nav bar flesh with the very top of the page using this code? Also, I want to make the nav bar AND my social media icons on the same line BUT I need them to be spaced moreโ€ฆlight my social media icons aligned to the right of the page and the nav bar centered.

    http://www.lulabelleblog.com

    1. Use the first part of this post – make top navigation bar fixed/sticky to make the bar flesh with the top of the page. Wrap your navigation and social media icons in separate divs such as <div id="navigationbar"> CODE FOR NAV GOES HERE </div> <div> id="socialnav"> CODE FOR SOCIAL MEDIA NAV HERE </div> that way you can position them separately.

      I’d recommend not using an image navigation but a regular text navigation for this since you aren’t actually using photographs or anything like that. A text navigation can be styled exactly as yours is now but will give you more flexibility to customise it.

  8. Alexa McCarthy

    If I wanted to create horizontal navigation without pictures, would I use the same code, just without the image part?
    Thanks!

    1. Pretty much yes, I have loads of tutorials for text navigation here.

      1. Isn’t there a way to have text and image navigation together?
        Like, just the home button being the picture and a few tabs and then social media icons with links?

        1. Yes, of course! Just combine the tutorials to include an image, navigation links and social icons. You can add them all under one ul or multiple ones, it’s up to you!

  9. Thank You so much! We are just starting up and this has been the most helpful tutorial so far ๐Ÿ˜€ xxx

    1. Awh thank you, happy to help! ๐Ÿ™‚

  10. Great tutorial! Is there a way for me to follow this tutorial and get my navigation bar at the very top of my blog, above my header, and to fit the width of my screen? Thanks!

    1. Of course, you can use the above tutorial along with the following tutorials – how to move gadgets above the header gadget on your blog, Make header, navigation and footer full width in Blogger, make full width navigation stick to top of browser when scrolling. Make sure your images are sized correctly ๐Ÿ™‚

      1. Thank you for getting back to me! I’ve created my navbar as an image to fit the width of my layout, so that part should be taken care of. I placed the image as an html/Java Script gadget that is currently below my header. But if i just want the navbar to simply be placed at the very top of my blog above my header, but not stick when I scroll down, how can I get it to do that? I hope you can help. Thanks!

        1. Ah okay, follow this one how to move gadgets above the header gadget on your blog to unlock your header and then you’ll be able to move your navigation above the header gadget.

  11. Carolina Ruiz

    Hi! First, I want to thank you for this tutorial and next, I want to know how to reduce the space between the images?
    Thank you! x

    1. Hello, what’s your URL? It’s probably the padding that needs to be reduced.

  12. Yippy Yay

    WOW! Thank you very much, I have looked repeatedly for something like this that works and tried so many different methods with no avail in the end, even my text book didnt help. But this worked great!! Thanks again.

  13. Hey Ellie, I love your tutorials!

    I was just wondering how I can add this code without the images to my blog, give it a CSS code name so I can edit the elements in the CSS section (e.g. centering it etc) and have a solid line running right underneath it?
    Its a lot I know, but I really appreciate your help if you have the time ๐Ÿ™‚

    Caitlin x

    1. Hello Caitlin, do you mean how can you add a menu without the images? I have a few navigation tutorials here for that. If that isn’t what you mean could you explain further and I will help you.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up youโ€™ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.