How to Add Blogger Menu Bar in Horizontal Mode on our Blog?

Hi bloggy readers,
Blogger Menu Bar is the most important element in blog or websites because by adding this menu element to your blog will make it easier for the readers to explore more about your blog. That's why i strongly encourage you to embed this blogger menu bar navigation on your blog. Moreover, blog means nothing if there is no navigation blogger menu bar in it. Okay, in this post, i would like to discuss about adding a blogger menu bar

Anyway, in my other post called Adding Dropdown Menu or Menu with SubMenu Navigation, i already uncovered to you about adding web menus and submenu with a drop-down function when being pointed by mouse pointer. So, the tutorial in this post is definitely different with that post because this tutorial i'm about to show right now, will only show a different background without any kind of drop-down effect. Interested on adding this blogger menu bar to your blog? Let's get started then...

Okay, before proceeding to this tutorial, now i want you to prepare your own pictures that later will be used to make this blogger menu bar. See the example below!

As you can see on the picture above, that is the pictures we're gonna use for the blogger menu bar that have 2 kind of effects. First, the first interface of blogger menu bar when not being pointed, and second, when being pointed by mouse cursor. Now prepare your own 2 pictures with different effects like the pictures above. But, you can also use 2 example pictures on this tutorial. Just press the right click of mouse cursor, and opt to the Copy Image Location.


As many of you know, those 2 pictures will also have 2 URL addresses, the URL addresses to access the actual pictures. For example, now copy the URL address below and put it in the Notepad.

Second phase: Adding menu on your blog


1. Go to Blogger
Now go to Blogger.com and then Log in to your Blogger account.

2. Go to Layout
In the Dashboard page, pick one of your blog and then press the Layout/Design button.

3. Edit HTML
Now press the sub-tab Edit HTML to begin editing the HTML code of your blog template.

4. Find the code
Press Ctrl + F and find this code

5. Copy the code
Now block all the CSS styling below and press Copy. After that, put that code before the code ]]></b:skin>

6. Find the code
Now go to the bottom and find this code. By pressing the Ctrl + F button, you will enter the Find mode.

7. Add the Horizontal Column Code
After locating the code section on number 6 above, now block the code below and then, copy. After that, paste it above the code section <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> (on number 6). By doing so, the blogger menu bar column will be installed above the header element.

8. Save the change
Now save the change by pressing the Save Template button. Now proceed to the second phase.


9. Go to Page Element
Now switch back the sub-tab from Edit HTML to the Page Element sub-tab. In the Page Element, now click the "Edit" link on the new horizontal column you've already created before, not on the header element. Blogger will prompt you with the "HTML/javascript" widget. Look at the picture below.

10. Paste the code
Now in the small window of "HTML/Javascript", paste the code below and put it in the box of the widget. By adding this code, the blogger menu bar will finally be shown to your blog.

As you can see in the code above, the words URL address Here must be firstly changed with your own URL address, for example http://www.whatmakesblog.com. And then, the words Link Title must also be replaced with the title of the related link, for example: Home, Contact Us, About Us, etc. So, after being adjusted to the new code, the code should now look like this:

Anyway, to add more menus in that blogger menu bar, you can simply copy the code section <a href... until the code </a>. Here's the example.

11. Save the changes
By pressing the Save button, now save the changes and it's done.

Okay, that's it for now. If you have something to ask to me, just type your question on the comment section below and i'll try my give you the solution.

Good luck bloogy!