How To Do "Menu Bar" In Blog

If you are new with blogspot and looking for the easiest way to have a simple menu bar in you blog, this is it. 

1st.

Go to "Design". Then click > Edit HTML.  You must click expand windget templates

2nd.

Look for: showaddelement=’no’.  

Don't know how to get that? Press control+F then type showaddelement=’no’ inside the box and press enter. You will find it. Once you find Showaddelement=’no’ change the 'no' to yes, like this  Showaddelement=’yes’

After that MUST save.

3rd.

Go back to Dashboard > Design > Page Elements > click Add Gadgets choose HTML/JavaScript....

Copy below code and paste it into the box HTML/JavaScript 
SAVE

<a href="http:// zyzabacky88.blogspot.com " class="navigation">HOME</a>

<a href="http://zyzabacky88.blogspot.com/search/label/Lawaks " class="navigation">Your label</a>

<a href="http://zyzabacky88.blogspot.com/search/label/Iman " class="navigation">Your label</a>

<a href="http://zyzabacky88.blogspot.com/search/label/Lyrics " class="navigation">Your label</a>

<a href="http://zyzabacky88.blogspot.com/search/label/Tips " class="navigation">Your label</a>

<a href="http://zyzabacky88.blogspot.com/search/label/News " class="navigation">Your label</a>

<a href="http://zyzabacky88.blogspot.com/search/label/Health " class="navigation">Your label</a>

Then find a place to set it.  I put it under the header bar. 

Change URL address zyzabacky88 to your URL address. Same goes to "Your Label", change it to the menu that you want. The red colour: Lawak, Iman, Lyrics, Tips, News & Health are my Menu.  Change it to your desired menu.

Always remember to put your URL address for all the post that you do so that it will link to your post. If you're not sure, go to your blog post and click label at the end of your post. click that label. Update the link.  Example as below for my "News" label: 

If you still can't find it, just type it. 

You can put as many menu as you want. Just copy & paste only. 

4th.

To get colour effect, click Design > Edit HTML . MUSTclick expand windget templates

look for code   </b:skin> , use CTRL+F to find it.


Copy below code: 


a.navigation {background: #3333ff ;color: #ffffff;margin: 1px;padding: 2px;border-width: 0;text-transform: uppercase;text-decoration: none;font-weight: bold;}a.navigation:hover {background: #333333;color: #ffffff;text-decoration: none;}

place it exactly on top of the code   </b:skin>   


then MUST save.
After save, view your blog.  You have a menu bar in your blog.




Ensure you put your URL link after your Title, for every post that you have. 

Example: http://zyzabacky88.blogspot.com/search/label/Tutorials 
This is my URL "Tutorials" menu



Hope this tips help you.  Happy blogging.  :)