How to Create a Menu Bar for Blogger Layouts, Part 3 (Menu Buttons)
October 19, 2007 by Sarah
Filed under Read These!, Uncategorized
Posts on this topic:
- How to Create a Menu Bar for Blogger Layouts, Part 1 (simple text links)
- How to Create a Menu Bar for Blogger Layouts, Part 2 (link boxes using CSS)
- How to Create a Menu Bar for Blogger Layouts, Part 3 (image buttons)
I’ve been noticing a lot of new bloggers are asking the same question: How do you create a top menu bar on Blogger/Blogspot? I asked this question on my blog, and no one could tell me. Also, the question has gone unanswered on the Blogger Help Group a few times. So I decided to do some posts on the various ways I’ve discovered to accomplish this goal. This may seem daunting at first, but if I can do it, anyone can!
After posting the first two articles about creating a menu bar in Blogger. I received an email from a fellow blogger, Kasie from The Art of Life. Kasie couldn’t use these tutorials because she was using Old Blogger, so she used a different method.
Kasie used Paint Shop Pro to make some buttons, then added them to her blog below the header.
I used this method on my new blog One Mom’s View, and I will attempt to post step-by-step instructions for buttons like you see in the screenshot.
Create your buttons using Photoshop or PaintShop (I use Photoshop)
1. Change the background color to the color you’d like to use for your buttons. Click the background square on the toolbar (shown with the arrow), and then select the color for your buttons.
2. Select FILE>NEW. Under image size, change the height and width to the desired dimensions. If you would like to make the menu stretch across your entire header, divide your header width by the number of buttons you want. My buttons for One Mom’s View are 155 pixels by 20 pixels. Under Contents, chose Background Color.
3. Add text. Chose the Horizontal Type Tool (the T on the toolbar) Click on your background and type what you want the button to say. Change color and font accordingly. If you need to move the text after you type it, you must change to the move tool in the top right of the toolbar. I do not know how to make a border on your button in Photoshop, I am certainly no Photoshop expert.
4. Save your button by selecting FILE>SAVE AS.
5. Upload your buttons to a photo hosting service such as photobucket.
NOW WE WILL ADD THE BUTTONS TO YOUR BLOG
1. Manually change the HTML template of your blog to add more space for a Page Element. (this step written by Michelle)
The best instructions I have found for this are at ‘Tips for New Bloggers’ in Bizwhiz’s post entitled ‘ Add Page Element to Blogger Header and Blog’
His article has excellent step by step instructions and color illustrations that I couldn’t possibly improve on, so I’ll just hit the highlights:
To Increase your options for adding page elements to your template:
- Click on your Template tab and then click Edit HTML
- ALWAYS, ALWAYS, ALWAYS save and download a copy of your full template BEFORE making any changes
- Hit ‘Ctrl F’ to search your HTML template and type in showaddelement to locate the proper place in your HTML code to make changes
- Look for a place in the code that says:
<div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’ no’>
- Change the maxwidgets to 3 and the showaddelement to yes – You will now have two extra places where you can add page elements.
- Scroll down a little further and find the place in the code reading:
<div id=’main-wrapper’><b:section clas=’main’ id=’main’ showaddelement=’ no’>
- Change the showaddelement to yes. You should now see options in your template to add page elements before and after your Blog Title. The process is different for the Dots template. I would suggest reading Bizwhiz’s article in entirety.
- One final place to change the code: Scroll down to where you see the code reading:
<div id=’content-wrapper’> <div id=’crosscol-wrapper’ style=’text-align:center’> <b:section class=’crosscol’ id=’crosscol’ showaddelement=’ no’/></div>
- Change showaddelement to yes
- You should now have an ‘Add Page Element’ option between the Blog Title (header) and the blog post section. This is the place where you would select ‘Add Page Element’ to add a horizontal navigation or menu bar.
- Once these changes have been made, click ‘preview’ to make sure that the changes are appearing correctly. Once you have verified that the changes appear correct, click ‘save template’. You are now ready for the next step!
2. Write a new post for each page you want to link on your menu bar. The most common are Home, About, Favorites, Contact, but you could do anything.
- The links you use will be the URL for each specific post.
- For Home, it will be your blog URL.
- For Contact, it will be mailto:youraddress@email.com
3a. If you want your menu to have your header’s background color:
- On your Template/Layout, click the very top rectangle under navbar, where it says add a page element. Anything you put in this top box will have your header background color from your title header. (If you have a custom header, the background for this box will still be the original header background color.)
3b. If you want your menu to have your posts’ background color:
- On your Template/Layout, click the rectangle under your Header, which says Add a Page Element
4. Choose HTML/Javascript. In the content box, add the HTML tag for your buttons from Photobucket. The code will look something like this:
<a href=”http://photobucket.com” target=”_blank”><img src=”http://i148.photobucket.com/albums/s14/juddsarah/HomeButtonRed.jpg” border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket”></a>
Where it says <a href=”http://photobucket.com” target=”_blank”> change the url to the url of your post, corresponding to the button. Mine would then look like:
<a href=”http://onemomsview.blogspot.com” target=”_blank”><img border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket” src=”http://i148.photobucket.com/albums/s14/juddsarah/HomeButtonRed.jpg”/></a>
5. After you add all your buttons, center them by adding <center> at the very beginning and </center> at the very end.
6. Save by selecting Save Changes. If you want the menu under your header, move (click and drag) the newly created Page Element underneath your header. Preview, then Save your template.
Viola! You should have a menu bar just like I have on my blog. If not, review the steps one more time, then let me know in the comments or email.
Was this article helpful? Share your finished product! Post a link in the comments to your site with your menu bar. (Do Follow)
You are a saint to post all that. I will definitely have to refer to it.
[Reply]
I just hope I did it right!
[Reply]
You did a much better job explaining it than I ever could, lol! I’m glad that it worked for you. Thanks so much for the mention.
[Reply]
Many amny thanks! I’ve found in this post exactly what i was lookin for… and finally a little guide which goes throug html language without becoming totally incomprehensible!
Tank you so much
[Reply]
THANKS! this is an effective and simple way to add menu nav at the top – just what I needed
[Reply]
Thanx a lot for this good tutorial. Just like what do I want in making the menu bar in blogger. For sure i’ll bookmark your page!!
[Reply]
Thank you sooooooooo much! I was able to add menu bars in my site. I have been longing to add menu bars but i had a hard time understanding instructions from others. YOU EXPLAINED IT SO SIMPLE. Once again, thank you!
[Reply]
Thanks for your clear tutorial! I’m excited to have real buttons. I put them in the sidebar as opposed to across the top under the header. Do you know how I would align them one on top of the other? Right now, they’re in a grid pattern (2×2).
Thanks again!
Amber
mammasmeanderingmind.blogspot.com
[Reply]
Sarah,
I’m so excited that your daughter is going to donate to Locks of Love! What a great way for a young girl to give of herself!
Thanks for your help on the buttons. Do you know if there is a way to have a space between each button? Right now it looks like one big block of purple with the words on top.
Thanks again!
Amber
mammasmeanderingmind.blogspot.com
[Reply]
Sarah,
I just went back to fiddle with the buttons and I figured out to put a second break after each button would give me the space I was looking for.
Thanks for sharing your knowledge!
Amber
[Reply]
kasha Reply:
July 11th, 2011 at 4:23 pm
How do I put the break after? In other words how do I space out the words like your menu? I should probably give up anyway. I have read it over and over 3 times and My menu is not working.
[Reply]
You are awesome.. I ve been looking exactly for this all night….. Oh god.. thanks you so much. You are on my Blog list…. MUAXS
[Reply]
Hi,
Useful post for me. Nice details.
It must be useful for my blog.
Meditation
[Reply]
Thankyou so very much for this tutorial! I have been trying to figure a way out to do this for months!
Thanks!
[Reply]
Ah, brilliant! Thanks so much for posting this. I have found lots of different solutions to add a nav menu, but this is exactly what I was really looking for! Thanks again!
[Reply]
Great info but some of the code is cut off. Also I am blogging hopping. hope to see you soon.
[Reply]
Hi, thanks for the great! info. I’ve done mine. jollence.blogspot.com
[Reply]
Thank you for a well-explained tip. I bet you’ve good karma!
My question: how do I change the font for the menu titles. None of the font/text options in blogger affect the menu font. I’m stumped!
Thanks
[Reply]
@BN
For the menu buttons using photoshop, you have to change the font in photoshop, and you simply upload the images to your menu area.
If you're using simple text links, add this code around your text:
<span style="font-family: georgia;"> TEXT </span>
[Reply]
Hi, I have added top menu but dont know how to link it and add content on that pages can you help me ??
phpdeveloperinindia.blogspot.com
email:bindasjindagi@yahoo.com
[Reply]
perfect. simple. thanks.
[Reply]
You are really distinctive in your way of explaining a ” how-to-do”
I am so happy today to have image buttons on my website..hurrayyyyyyy…..thank you a lot for that wonderful method of creating a Cool Menu bar.
I will be honored by your visit to my websites,
http://www.TECfun.co.nr [ Blog ]
http://www.Qiyamah.co.nr
[Reply]
Help!!!
New to alot of this I tried to
add a header bar like yours to link to my other blogs etc and it keeps putting a drop down menu there
can you help the ole man?
[Reply]
Paul, what is you url, and I’ll look at it.
A drop down menu? Now I wish I knew how to do that!
[Reply]
SARAH
Thanks for getting back to me.
http://polirect.blogspot.com
Its the site I wiped out so I could pratice.
Paul
[Reply]
It looks like you just need to make the words (Politics, energy, etc) into links. Use the same method you would use when writing a link in a post. You do have to make posts to link the menu words to. Does that make sense?
[Reply]
SARAH
Thanks i didnt have the code right
but i looked at your review again
now with the site address in right it acts just like a link thank you all so much now i can start on my main site when i get it together
Also I like your site and sent it on to my sister and her friends all moms and grandmas me=ole grandpa but ill be back
Thank you again Sarah
Paul
[Reply]
Thanks. This article helps me creating a menu in my blog. check it out
http://www.explore-your-thought-process.blogspot.com
[Reply]
Thanks!!!!!!! After several hours I came to your blog and did it in less than 30mins.
[Reply]
Wow! You made this seem so easy. And my buttons even work on the first try.
Thank you sooo much! – Teresa
[Reply]
Thanks! I was having trouble getting my “contact” button to work, but this did the trick. I appreciate you taking the time to post it all.
[Reply]
u r really great…. best.. best and always best…
[Reply]
Thanks for a great tutorial, thought I have a problem… I get spaces between my buttons and I don’t want that, can someone help me? There is a separation with 3-4 px between every button.
I use Firefox 3 if that is any help.
Thanks in advance!
[Reply]
Sorry for "spamming" (I posted the previous message) but I just solved my problem.
For anyone who wonders how, here is the answer:
I separated the code to make it more readable, like this: (replace { with < and } with >)
{img src="pic.jpg"}
{img src="pic2.jpg"}
{img src="pic3.jpg"}
By compressing it to this mess:
{img src="pic.jpg"}{img src="pic2.jpg"}{img src="pic3.jpg"}
The spaces were gone.
Good luck
[Reply]
Thank you!! I just finished putting the menu bar on my blog…I’ve been trying to figure this trick out for awhile now
[Reply]
Thank you very much for this! I stumbled upon it on my journey to make a new blog…It helped me a ton. Im just wondering if you know how to get those links to open in the same window rather than opening a new one??I have no clue
[Reply]
Thank you so much!!!! it was so easyyy to do this! thank you again check out my buttons at http://inolvidablesrecuerdosdeboda.blogspot.com/
Now i need to figure out how to put several posts in one button do i just add more links separated by commas? thank youuuuuuuuuuuuu
[Reply]
Hello and many thanks for your help. I managed to do it although I don’t really know html. The result here http://cronicatvro.blogspot.com/ .
Thanks again
[Reply]
I came across you blog and I wanted to let you know how helpful your tutorial on menu tabs was. I just have one question though.
http://sunnahnoteshalaqah.blogspot.com
As you can see, the five posts on the main page correspond to one of the menu tabs up on top. How do I hid them on the main feed? I want to keep the front page just for news. Then I want the Events to be on a separate page and not show up on the main page. Do you get what Im saying or am I blabbering? lol Any help at all would be appreciated. Thanks again for the tutorial.
Aimy
[Reply]
Thank you for your easy, step-by-step instructions!
I just created the type of menu I was looking for on my blog: http://www.winnipegdogs.com
[Reply]
Awesome! I’m going to try this!!! I’m excited
thanks for sharing
[Reply]
Wow thanks heaps for this little tutorial, has made my site look much better and easier to navigate through, thanks so much!!
http://www.nzcreativewebdesign.com
[Reply]
This was really helpful for my blog! Since I am working on getting a website done I really needed something to add to the navigation, and for contact info (at least where one can see it.) You are a life saver! Now I can present my portfolio!
[Reply]
You explain it well. Thank you very much.
Take a look at drop-down menu on my blog.
Btw, I like wide space with white background in your blog design very very much.
[Reply]
It's quiet simple but very very useful information. Nice tips. You explain it very clearly and detailed. Nice job. Keep up the good work.
[Reply]
Thanks! I have been wondering how to do this for a long time. I don't have the pages completed yet that correspond with the buttons, but this is what it looks like for now.
http://tomorrowsplight.blogspot.com
[Reply]
You are a life saver! I had a code for a navbar but it was never centered! Using your code everything came out perfectly!!!! THANKS!
[Reply]
This is great! I finished my buttons and added your link to my blog:
http://www.lilblueboo.blogspot.com/
Question though, do you know how to keep the buttons from "wrapping" when you change the size of the window?
Thanks!
Ashley
[Reply]
Wow its excellent thank you very much , soon i ll paste my link
[Reply]
i'm stuck in no. 2
anyone please help me where i can find my link – url
Thank you n much appreciate.
Janu
[Reply]
Wahoo…I did it after almost 2 hours of trying just word like the 1st tutorial I couldn't do it but I figured out the buttons Yeah…thank You..
[Reply]