Wednesday, August 21, 2013

How to make a custom Menu Bar


What is a menu bar? Those static pages below the header that take you places like your “About me” page or Etsy shop etc.

If the only page that shows on your blog is “Home” and you’d like to have more of them, here is how you add them.

1. ADD PAGES
  • Go to “Pages” on your Blogger design
  • Click on the “New page” and select either “Web address” or “Blank Page”
    click the image to see it bigger
  • Use “Web address” if you want your page to open a link like your Etsy shop, Facebook, E-mail etc. or even to link to a certain blog post or multiple posts with a certain label
    click the image to see it bigger
  • Use “Blank page” if you want to compose a blog post like About me page
This is what you do extra for the custom menu bar:
  • Choose the “Don’t show” option
    click the image to see it bigger
  • Click on “View” on all the pages and they should open in a separate tab. You will need their URL later on.
2. PREPPING THE TEMPLATE
If you have done the image map header tutorial, you already have this part done. If not, here’s what you need to do.
  • Go to your Template > Edit HTML
  • Back up your template.
  • Search for 'header-wrapper' and find these lines:
    click the image to see it bigger
  • Change the following: showaddelement from no to yes
Save and go to your Layout to check if there is “Add a gadget” option below or above your header.

3. MAKE YOUR CUSTOM MENU BAR
There are several ways to do this. Be aware of the height and width measurements. I used 100x100 pixels but customize this to your own preference.

1. Make an image map (follow the image map header tutorial for this) – this is the easiest way, if you want your menu bar to look like a continuous thing. For example a banner.
2. Create separate pictures for each page like below
click the image to see it bigger
  • Use any software you’re comfortable with to create buttons, use a photo or you can even draw / paint an image and scan it to your computer. Make sure you save the images in .png format without the background so it nicely integrates with your blog template.
  • You need to upload the menu buttons to the web. Either use a third party like web albums or you can make a blog post and publish it so you can “Copy Image Location” with a right mouse click. You can delete this post later.
  • When you have image URLs, open the previously mentioned widget below or above your blog header and choose HTML/JavaScript. Leave the Title blank.
    click the image to see it bigger
  • Paste all URL links for menu buttons in the widget clicking enter to make a space between them. If you saved the pictures to a third party you need to select HTML code. If you saved the buttons in a blog post, you need to add the following.
  • It needs to look like this. And when you click the “Rich text” you should be able to see the button images.
    click the image to see it bigger
  • To make links to where the menu buttons would open to, select the individual button link and click the "Create link".
    click the image to see it bigger
  • Remember all the page tabs you opened in the beginning? Now is the time to copy the link and enter them in the required field.
  • If you don’t want your menu bar to be aligned left but rather centered, add center at the very beginning and /center at the very end. Like below.
  • You should get something like this.
    click the image to see it bigger
Save and admire your new menu bar.



Share/Save/Bookmark

17 comments:

  1. Love your tech savvy posts! Great job. xox

    ReplyDelete
  2. You are so helpful and enjoy sharing what you know...I love that about you :)

    ReplyDelete
  3. It amazes me that you can do all this and share it to boot. Absolutely wonderful. You are a true teacher NatashaMay. xoDonna

    ReplyDelete
  4. Wow Natasha, you're GOOD! Not sure whether I understand all the details, have to try it out, but thanks so much for sharing this!

    ReplyDelete
  5. Natasha, you sure know your way around those http and html and all that stuff. Even your excellent presentation is beyond me. I'm sure those more in tune with the workings of computers will appreciate and use your instructions. Thanks for sharing. Someday I may give this a try.

    ReplyDelete
  6. You are so smart!!! I appreciate this information so much! If I try to do this, I hope I don't screw it up! LOL!

    ReplyDelete
  7. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon.
    website design

    ReplyDelete
  8. Thanku I Love You Sweet heart muhaaa

    ReplyDelete
  9. Thank you so much for sharing! Well... i ve searcehd all over the web and read your way of adding your own custom menu bar, but still cannot do it! There must be smth wrong with me i guess! :P Hehee. I ll read your post over and over again and maybe i ll manage to do it in the end. Thank you! :)

    ReplyDelete
  10. Please Help Me With Pages in Blogger

    ReplyDelete
  11. i confius...n not understand at all...can u help me

    ReplyDelete
  12. you must be joking! i'm a writer not a computer tech., there must be an easier way...

    ReplyDelete
    Replies
    1. Well yes! You can certainly pay someone to do it for you. :) I'm not a computer tech either but I can follow directions.

      Delete
  13. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. thanks for this I learn how to put menu bar on my blog..

      Delete

Popular Posts

 
Go To Top