Blogging Tips | DIY Custom Menu Bar

Something I learned how to do in the last half of 2013 was how to create a custom menu bar for Blogger. This was something I wanted to learn for quite some time, and honestly it took a lot longer to figure out than I ever thought it would! However, I did finally figure it out {proof is in my own custom menu bar here on the blog!} and I'm quite pleased with myself.

I had to use multiple tutorials and tricks to figure out the process. I thought it was long & hard, but once I got it I realized that it really was quite simple. There are a lot of steps, but most of them can be gone through quickly so don't stress over it. You will have to make changes to the live HTML of your blog, but they're small and *shouldn't* bother anything on your live blog.

Lets Get Started!

There are four parts to this tutorial. Each one is vitally important and can be time consuming and frustrating, but almost everything is repeated multiple times so by the time you get through the first run (parts 2, 3, and 4 have repetitive directions) you get the idea and it gets easier and easier from there on out! *hopefully!*

PART 1

Here you will edit your blog's HTML. You can have the option of adding a custom menu bar to your blog page. This part is not difficult, but it may take more than one try before everything shows up like it is supposed to. Don't give up if things don't work out quite right the first time through. When I was working changing these settings for BEBBlog it took me three times because I didn't change all the settings the first two times.

STEP ONE: Go to your blogger Template. Click on the button which says 'Edit HTML'.

STEP TWO: When you see the screen above pop up, click anywhere so that the cursor is in the text. Next go to your keyboard and push the button 'CTRL' and the letter 'F' at the same time (it's not upper or lower case specific). You should then see the search box like the one the pink arrow is pointing to here. If not, click anywhere in the text area and repeat this step until it does.

STEP THREE: In the search box type or paste these letters: showaddelement. When you get that in the search box press 'enter'. Each time these letters appear together in the text it will have a spot where it will say 'yes' or 'no'. Press 'enter' to be taken immediately to the next point. At each point where it says 'no' you will need to change that to a 'yes'. For BEBBlog it shows up 8 times from top to bottom.

STEP FOUR: Once you get each of the showaddelement spots changed from 'no' to 'yes' go back through them by using the 'enter' button. The section you need to focus on next has to do with the 'header'. (Notice that typed just before the top pink arrow in the photo above.) Where it says maxwidgets change it from '1' to '5' (I use 5 because it's easier for me, you can do 2 or 3 though, it doesn't really matter). The second arrow is pointing at the locked='false'. In your blogs HTML this will say 'true'. Change it from 'true' to 'false'. This will allow you to add the custom menu bar to your blog.

STEP FIVE: Save your template. Once that is done, click on the 'template' tab on your blogs left sidebar. You should now have a lot more options of where to 'add a gadget'. The main one you will need for this project is the third 'add a gadget' bar down. {I did find that I had to refresh the whole blog page even after the HTML had been edited before my blog layout looked like the one shown in the photo above. I guess the settings need a moment to catch up with real time. Not sure why this is.}

If you reach the end of this first part of the tutorial and your scree does NOT look like mine in the photo above, go back to the 'edit HTML' and double check to make sure you changed the 'no' to 'yes' and the '1' to '5' and the 'true' to 'false'.

PART 2

Now that the HTML has been edited and you have the option to add a menu bar, it's time to create the images for your menu bar pages! For this part of the tutorial I will be using a transparent background on Picmonkey. If you don't already have a transparent background to work with you can click here and download one I made and uploaded to my Picasa account. It is 600x600 pixels and more than big enough to create menu bar buttons. When you click on the link it will take your right to the photo, however it will look like nothing is there. Just right click and 'save image as'. Make sure it saves as .png or it will no longer be transparent!!!

STEP ONE: Go to Picmonkey.com and upload your transparent background. You will need to resize the image into something that's more realistic for menu buttons. Click the 'resize' button on the left and uncheck the box which says 'keep proportions'. Now type in 400 x 100. Your transparent background will resize automatically.

STEP TWO: Creating the buttons for your menu bar is something you want to do all at the same time. Make sure you know what pages you want to link from your menu bar before starting this step. You will want to start with the longest page name and work down to the smallest {if you look at my menu bar you'll see the button I have on the screen here is my longest page name}.

Select your text! There are lots of free options, or if you have the Picmonkey Royale you can select from ANY of the texts available. Free options DO NOT have a gold crown next to them. Type in your text. I chose to put the little line to help distinguish between pages on the finished menu bar. That is completely optional though.

STEP THREE: Once you get your text typed in you will need to go back to the resize option (it's in the first list of options). This time you WANT the 'keep proportions' box checked! The buttons along the top of my menu bar all end in x50. The first number changes with the length of text in the image.

STEP FOUR: Repeat these steps until you have created all of the buttons for your blog. Start with the button which will have the most letters or characters in it and slowly crop down the width of the transparent box to fit each new button image. This way your transparent box and text size don't change and everything will appear perfectly even once you get it in the custom menu bar.

PART 3

Creating custom clickable buttons is the next part in this process. Your images are made. They are the same height and text size (though width varies depending on the text in each image), and they are ready to be added to some custom HTML.

STEP ONE: Create a new album on picasaweb.google.com/home. Upload all of the images for your custom menu bar to this album. Since I was doing a huge makeover there are a few other random photos shown above which are not part of my menu bar images.

STEP TWO: Open a new draft post on your blog. Add the first photo for your menu bar do the blank post. On my menu bar that was the 'home' image.

This is the HTML code for you button image.

This is the HTML code you will be editing to create custom clickable buttons.

<a href="http://blueeyedbeautyblogg.blogspot.com/p/blog-restyling.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMt4v7HNrt65ZZMrL345FLiuz34YXR0YQ6dfeAFwthj1SXqAKx8MgL3IMCBKPRYY7lw4vHnKCIysUXHB3KGwRkJH_1OoSQ4fMKSVq2BVSxCOVH9A5h3K1J3vEN7-uhb-pbUbQA2O2uxU0s/s1600/100x100+want+me+to+restyle+your+blog.jpg" /></a>

The hilighted part is what you will need to copy from the image code to replace the yellow part in the code above.

Highlight the URL for the page you want the image to be linked to.

This is my HTML for each of the buttons for the menu bar.

STEP THREE: Click on the button 'HTML' and you will see the complicated HTML for that image. Leave this page up and open a new window in your browser.

STEP FOUR: In the new window open a second draft post and click 'HTML'. Copy this code and paste it into the box:



STEP FIVE: Go back to first draft post where you uploaded the menu bar image. Copy the code as show above. This is the direct URL for the image you created and uploaded to Picasa. So to be clear: copy the code from http:// all the way through .png by highlighting it and pressing 'CTRL' & 'C' at the same time.

STEP SIX: Paste this image code into what was the yellow part from the code in step four. You will completely replace the original image from that code with the new image you just created.


STEP SEVEN: Now go to the page on your blog you want to link this button to. For example: if you're doing the 'home' button go to the home page of your blog and copy the URL. Paste it where the pink part of the text was in step four.

STEP EIGHT: On the draft post click 'compose'. You should now see your button for the page. Go back to 'HTML' mode. Copy the code you just made and paste it in a word document. I find it easier to label each image code so I can easily find the one I want when it comes time to mash them together. Of course this is also why you might want to create the button codes in order of how you want them to appear on the finished menu bar.

STEP NINE: Repeat these steps for each menu bar button you want on your blog. Save EACH new code you create into one word document for easier finding later.

PART 4

Code mashing time! Once you get the code made for each individual button on your menu bar it's time to mash them all together. This part is fairly easy, but if you're not careful a link may not work and you'll have to start the whole code mashing process over again (unless you know what you're doing with HTML and then you can just look for your error and continue on).


STEP ONE: Go to the word document where you saved each image code for your menu bar. As you can tell, I put them in order of how I wanted them to appear (and if you did this your job is simplified!). Copy the code for your first button (example: mine was for the home page) and paste it into a new or blank draft post in 'HTML' mode.

STEP TWO: Copy each of the following codes and paste them one after another in the draft post. It is important that you have the a><a parts touching and no gaps or <div> between them. If you don't do this it will cause problems when you try to load it on your blog.

STEP THREE: Once you get all the codes for each button lined up switch the post back to 'compose'. Click your cursor at the end of your images and then 'center' them. Although they appear in two rows on the draft post, they should show up in one straight and centered line on the menu bar of your blog.

STEP FOUR: {Just a note: I went ahead and added my own custom header to the front of the mix and then lined up the buttons underneath it, that is not necessary, but is an option.} Copy the code you just created.

STEP FIVE: Go to your blogger 'layout' and click on that third 'add a gadget' button. Scroll down through the list and select the gadget: 'HTML/Java Script'. Paste your code into the empty box and save.

STEP SIX: Go to your blog main page and admire your work! Be sure to check out each indivudal link so you know they all go to the correct pages. NONE of them should open in a new window (blog pages don't need to open in a new browser window, links to places outside the blog SHOULD open in a new window, but the code used here will not do that automatically). If one of the buttons is incorrectly linked just replace the page URL and try again.

THE END!

See? It's lengthy and probably slightly confusing, but a lot of repetitive steps in between! Good luck on creating your own custom menu bar! If you have a question please leave it in the comments and I'll do my best to help you out.