{Blogging Tip # 2 – How to Add a Menu Bar – Part ONE}

As a wife and mother to 2, I don’t have much free time but when I do, it’s usually spent on the computer learning new things. One of those new things that I had recently learned was blog design. For awhile I had been doing it for free and one question I would frequently get asked when beginning a design was “Can you add a menu bar to my blog?”. My answer, “yes”.

Since I am no longer doing blog design, I want to share this little tutorial on how to add a menu bar (and a few additional widgets – or gadgets they’re now called) to your Blogger layout. If you want your layout to look like the image below (circled items are the ones that will be added to your existing layout), follow these easy steps.


Login into your Blogger account.

Click on the Layout tab.

Click on Edit HTML

Press Ctrl+F to open up the “Find” box

Type showaddelement (all one word)

You will see something like this:

Everywhere that it says ‘no’, you are going to change to ‘yes’.

**ONLY WHERE IT FOLLOWS showaddelement. There should be about 3 places that you are going to change it from ‘no’ to ‘yes’. You will probably have to scroll down a tiny bit to change all of them.

Click Save Template

You are done! You are now able to add a widget above your blog posts, under your blog heading (or above it).

If you benefited from this tutorial, just leave me a comment. :)

Due to the amount of content that is used without permission and proper credit, I am no longer allowing a full RSS feed. I value each and every reader so I hope you will click through and come visit!

XOXO
Diana
www.thegirlcreative.com

Keep Up to Date – Subscribe to our Weekly Newsletter

* indicates required

Comments

  1. says

    Is there a specifit widget for the menu links? How do you organize everything so when you click on the link, it shows your freebies, blog tips, etc.? Can you tell I’m totally blog-illiterate? :)

  2. says

    Once you follow these instruction, you will just add an HTML gadget in the space under the blog header. Are you familiar with any photo editing software like photoshop or paint shop pro or even paint.net? That is where you make the graphics (home, about, freebies, etc.)

  3. says

    Thank you so much for sharing this. I’m in the process of updating my blog and this is something I wanted to add. I just want to make sure I’m understanding… so I need to find a html gadget where I’ll connect a graphic I create in photoshop? I’m new to blogging and know very little about html. I do have elements and I’ve been working on a new header, so I’d love to add this on too. Thanks for your help!

  4. says

    OK, I think I need a little help too. Do I need to create a new page or something to link the cute graphic to? How do I do that? This is sort of like creating a website with different pages, right? The links go to separate pages? I didn’t see the instructions for creating the content that would be linked to the graphics. Thanks so much for your help!

    Anna

  5. says

    Hi I just found you and am going to TRY this too this weekend. Wanted something like this for a while. Just have to think on WHAT to link to, lol.

    Hugs from the Netherlands

  6. says

    Hmmm, i’m not sure what’s going on with your blog. I took a look myself and it was doing the same thing to me. :( I noticed that you had some custom fonts going on in your sidebars and blog post titles and I can only think that maybe that has something to do with it?? That is just a wild guess. :( Wish I could be more helpful!!

  7. says

    This is a valuable tip, and you are awesome! I asked another blogger this question, and came the reply ‘I’m busy’. And here you are, giving tips on blogging and crafts, all of them useful!! Bless you!

  8. says

    Oh my gosh, if I could reach through the computer I’d kiss you! I’m pretty decent when doing our blog, but I have been DYING to figure this one out! THANKS!!

  9. says

    thank you soooooo much! i got rid of my website and was just going to go all blog because it’s free! woo! and i was wanting a menu bar! so for photography i want to put prices, home, what you get etc… how do i get my pages for those once you push the buttons? i am new to the changing your blog thing! thanks again!!!

  10. says

    Thank you so much for taking the time to show everyone this step by step process, you are amazing! I have a quick question, I’ve recently noticed that even though my settings say show 15 posts on first page of blog, only like 4 are showing and you have to click older posts. It just recently happened after Easter weekend. Since you are so blog savy, I was hoping you knew how I could fix this. Thanks again!

  11. says

    Bless you, Dear girl! It took this ole brain a while but I finally figured it out. Now to suss out how to add those cute little buttons to encase my links.
    SneakyMomma sent me by way of her blog – http://sneakymommablogdesign.blogspot.com/2009/01/downloading-your-template.html

    I know this post is ages old but saw where you’re taking 2010 summer off to spend on your husband and family. GOOD FOR YOU! You’re getting your priorities straight and God will bless you for it!

    BTW, my Farm Maven blog is my new blog to help farmers and small business owners increase their income. My farm blog is
    thistlecovefarm.blogspot.com; come for a visit sometime.

    Thanks again…and again…

  12. says

    Thanks so much for this tip. I figured out how to add the gadget above my post section, but cannot figure out how to reconfigure my pages horizontally rather than vertically. Going to see if you have any other posts related.

    Alison

  13. says

    Hi there, I cannot find the post above “Adding a Menu Bar -Part 2″ Am I missing it somewhere? Thanks SO much for posting these directions!!

  14. says

    Thanks for this post. I have a Mac and the ctl pluss F step does not work. A find box does not pop up and I don’t know how to find it otherwise… hmm. maybe I need to discover a different way to create a menu bar? Any ideas?

  15. says

    Thank you so much for this tutorial! I did have to tweak it a little and after seeing the comment above mine I thought I’d share.

    On the second “showaddelement” I had to also change the locked=’true’ to ‘locked=’false’.

    Yay, now I have a gadget above my header!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>