I get asked quite often how I put a top menubar with clickable buttons on my blog. I did a lot of reading and there are easy ways and there are difficult ways. I hope this is an easy way. :-)
You are going to want to make your buttons. You can make them from scratch or find ones you can download. I used Pixels & Ice Cream's Plain Doodle Tags for the menubuttons on my blog. I also include some free ones I made you can download at the bottom of this post. I purchased the entire set of Pixels & Icecream, but Jennifer has a freebie in that set which I used in this tutorial. I opened up the .png with a transparent background.
I wanted the button to be long and narrow, so I typed Ctrl-T to free transform it and just adjusted the height setting.
These buttons are gray and I want them white, so I used my magic wand to select the gray and then Edit, Fill with White. You can use any color of course.
I also wanted to add a slight drop shadow so I went to Layer, Layer Style, Drop Shadow and added a slight drop shadow around the entire button to highlight it a bit.
Now I have a small drop shadow and I also cropped right up to the edges of the button.
Finally, I went to Edit, Image Size and made this button 150px wide. You can use any size you want, and 150px wide works for my blog.
I added a text layer and saved as a layered .psd file. Now I can make and save all of my buttons using this file. I make sure to not Flatten but Merge Visible and save as a .png so my background remains transparent, just in case I change my blog background from white.
After you make all of your menubuttons, upload them to your favorite image hosting site (I love TinyPic) and grab the direct link for layouts. Now it is time to put together your html code for your menubar!
You can read through this information and hopefully it makes sense. You can copy the code below (it is for 5 menubuttons, but you can add or remove as many as you want) and put in your own menubutton images and their links.
<center>
<a href="http://website-link1.com/"><img src="http://menubutton1-direct-link.jpg"/></a>
<a href="http://website-link2.com/"><img src="http://menubutton2-direct-link.jpg"/></a>
<a href="http://website-link3.com/"><img src="http://menubutton3-direct-link.jpg"/></a>
<a href="http://website-link4.com/"><img src="http://menubutton4-direct-link.jpg"/></a>
<a href="http://website-link5.com/"><img src="http://menubutton5-direct-link.jpg"/></a>
</center>
Here is what my Home button would look like (I used my for example code in the Office screengrab above), and if you click on it you will be directed to my home.
For laziness sake, I just copied the code three times and strung it all together so you can see what it would look like. Remember, you would not have three Home buttons linking Home, this is just an example of what the buttons will look like centered together.
So what do you do with this code once you are finished writing it? BTW, I write all of my code in Notepad. Just go to your Blogger Page Elements, click on Add a Gadget over or under your header, and paste the code into a HTML/javascript gadget.
I made up a small set of menubuttons you can use on your blog. They are 1000px wide, so be sure to crop them to size before posting them on your site! The little bird you see on the menubuttons below are from Font Squirrel and are from a set of dingbats called Kfon.Just click on one of the download links to download these buttons (they are both the same files, just different hosting sites).
You didn't know this was so easy, did you? Now you are ready to make a page and link it, right? Well, you are in luck because I have a tutorial for that too. :-)
NOTE: If you can't add a gadget above or below your menubar on your blog template, look for this template code seen below and change the code to what is highlighted in yellow.
If you have any questions, please post them them in my CoffeeShop Flickr Group! And for complete info on installing all of my actions, click here!
