I Love Fireworks! Soon they will be starting, let this month's freebie help you celebrate. God Bless America! This freebie is called July 4th and is created by My Life ’Xpressed with graphics from Trish H. Designs and ScrapDesafios. Enjoy and have a great Holiday!

You can find this months freebie as well as detailed instruction on how to install the design by clicking on the design below or this link. If any graphic designers out there would like one of your kits to be hosted at Mammalicious Finds please e-mail me at Mylife.Xpressed@gmail.com.

Menu Bar! Now we are getting to some fun stuff!!! This is the most complicated tutorial I have done to date. I would have normally waited a bit to do this one but I have had quite a few requests for it. If something is hard to understand please e-mail me at mylife.xpressed@gmail.com.

Here is an example of what we are going to be learning to do. For a closer inspection click on the image below.



I am going to walk you through how to put a menu bar on your blog.

1 - VERY IMPORTANT!!! Backup your template. If you don’t know how to do this click HERE for more detailed instructions. Also, if you have any special gadgets along your sidebar you may have to reinstall them. So if they have codes you may want to paste them into a document so they are easy to find again.

2 - Now we are going to edit your HTML code.
Go into Layout, and Edit HTML



First thing we need to create a gadget bar at the top of your blog to place your menu bar.

3 - Scroll down to the bottom until you see this. (It will be near the bottom.)

<div id='header-wrapper'>
< b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change maxwidgets='1' showaddelement='no' to maxwidgets='3' showaddelement='yes'

It should look similar to this
<div id='header-wrapper'>
< b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

4 - Under that scroll down until you see this

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no' >

Change it to showaddelement='yes'



5 - Save your Template.

6 - Now for the Menu Bar. This is the code you will need.

<center>

<a href="WEB ADDRESS 1">TITLE 1</a> <a href="WEB ADDRESS 2">TITLE 2</a> <WEB ADDRESS 3">TITLE 3</a> <a href="WEB ADDRESS 4">TITLE 4</a> <a href="WEB ADDRESS 5">TITLE 5</a>

</center>

Replace the “Web Address” with the desired web address you would like your menu bar to link too.

Replace the “Title” with the desired title for the corresponding web address.

So if I am trying to link to my website it might look like this -

< href="http://mylifexpressed.blogspot.com/">My Life ‘Xpressed Blog Design</a>

For each additional button you would like on your menu bar add an additional code.

<a href="WEB ADDRESS 5">TITLE 5</a>

7 - Once you have your menubar code go into your customize add/arrange page elements and click on the “Add a Gadget” at the top of the page. This is the bar we made at the very begining of the tutorial.


8 - Scroll down until you see HTML/JavaScript chose this option. Paste your finished code into the box and save.

9 - Click and drag your gadget so it is under the header.




10. Save.



Congratulations!!! You now have a personalized menu bar!

That concludes this month's tutorial. If you found this tutorial helpful please leave a comment. If there is something specific you would like to see a tutorial written on please feel free to e-mail me MyLife.Xpressed@gmail.com and I will see what I can do. :- )

Please stop by my shop and look around,
Julie, My Life ‘Xpressed