Hi All Dear Visitors, Sorry For Being Late On Reply Your Messages And Comments, I'm Now Working With AllBlogTools.com Team On The Next Version Of AllBlogTools.com v3. The New Version Will Be Launched Soon, Please Wait For Our Surprises, We Are Working On A Great Features And Amazing, Powerful Version.
You Are Here You Are Here NowAllBlogTools > Blogger Tricks and Hacks > Blogger Tricks / Other > Editing blogger top menu Links

Post Details  Posted By Max On Thursday, December 25th, 2008 In   Blogger Tricks and Hacks



Share

 
Editing blogger top menu Links

how to edit the top blooger horizontal menu, menu bar
or top navigation menu,Blogger Tricks


- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe
place.

alot of people download new and beautiful blogger templates with top menu added
bet they can't edit, modfy, or even remove it, and today we'll learn how to edit
any blogger template top horizontal menu, what ever the template, we'll seE how
to defined the top menu codes and edit it. editing the top menu links dependes on
finding the menu codes in our template so the first step is to find the menu codes,
actually finding the menu code is the hardest part. so log in to your blogger account,
then click LAYOUT > EDIT HTML . now you are at EDIT HTML page, and here you can
see all you template code. open your blog in a new window and read your top menu
links titles, and see the next picture, i'll use here nice template called : integral
made by blogandweb.com and you can seeit's demo here.

Editing blogger top menu Links

YOU MUST READ THE INSTRUCTIONS ON THE LAST IMAGE. at our tutorial we'll copy the link title "contact us" and now go yo your blogger account page " Edit html" then
if you use FireFox or Internet Explorer or any another Browser click "CTRL + F"
and past the link title that you copied it, and here it our example we'll past the
title " contact us " and click Enter or Clikc Find. the browser must find text match
the title in your template code. please Zoom the next image and read the instructions,

Editing blogger top menu Links

if you selected word like " home " to defined your menu code place in your template
code, let us tell you that it's bad choice because it's too popular word and you'll
find it more than 3 or 4 times in your code, and here we aim to find the menu titles
just to defined the menu code location in our template code, and here is some menu
codes will help you to know the menu code once you see it,

<ul id='menu'>
<li><a accesskey='1' href='#' title=''>Home</a></li>
<li><a accesskey='2' href='#' title=''>Contact
us
</a></li>
<li><a accesskey='3' href='#' title=''>About Us</a></li>
<li><a accesskey='5' href='#' title=''>Edit</a></li>
<li><a accesskey='5' href='#' title=''>Edit</a></li>
</ul>

OR

<div id='menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact
Us
</a></li>
</ul>
</div>

you must find the link title in a form like the last 2 tables, if you find it like
this, then you found your menu code and this is was the hardest part, now lets talk
about how to edit your top navigation menu, so please see the next tables to see
how to edit your top menu and follow the instructions,

<ul id='menu'>
<li><a accesskey='1' href='
Title 1 link URL'
title=''>Tittle 1</a></li>
<li><a accesskey='2' href='Title 2 link URL'
title=''>Tittle 2</a></li>
<li><a accesskey='3' href='Title 3 link URL'
title=''>Tittle 3</a></li>
<li><a accesskey='5' href='Title 4 link URL'
title=''>Tittle 4</a></li>
<li><a accesskey='5' href='Title 5 link URL'
title=''>Tittle 5</a></li>
</ul>

OR

<div id='menu'>
<ul>
<li><a href='Home page link URL'>
Home</a></li>
<li><a href='Blog page link URL'>Blog</a></li>
<li><a href='Photos page link URL'>Photos</a></li>
<li><a href='About page link URL'>About</a></li>
<li><a href='Contact us page link URL'>Contact Us</a></li>
</ul>
</div>

and now i think every thing is clear for you to start editing your blogger top
horizontal navigation menu, and here is a trick you may need to make your contact
us page


Add contact us form to blogger
witch going to help you creat contact us page
to your blogger blogspot blogs.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

DeliciousFacebookDigg
Design FloatMixxReddit
StumbleUponTechnoratiTwitter

comments

  • 45 responses so far!
  •      nazli ( 5:31 PM on 12/29/08 )

    I found this very useful but what if I have no horizontal navigation menu, could you please direct me on how to put one on top of a blog in the first place.

    Appreciate it a lot,
    thanks

  •      Max ( 5:46 PM on 12/29/08 )

    hi nazli.
    can you tell us the name of the template you use to make us help you as best as we can.or send us it’s code.

  •      nazli ( 12:25 PM on 1/1/09 )

    Is it enough to tell what is written below?

    Blogger Template Style
    Name: Minima

  •      Max ( 2:25 PM on 1/1/09 )

    hi nazli, sorry for asking you again but is it one of blogger default templates,
    is it the template that you use on your site http://www.hediyemotoru.com/

  •      Aziz ( 2:29 AM on 1/5/09 )

    Dear friend,
    As Azli asked you, I’v have a problem in making horizontal menu in tempalate designed without top menu nav, I have tried by adding a gadget in top menu, but when i copied the HTML script for Horizontal menu, it just look as vertical menu whent it’s published. Can u gimme a solution for this case? thank u!

  •      nazli ( 3:16 AM on 1/5/09 )

    Hi max,

    Yes, it is exactly the template that I use on my blog: http://www.hediyemotoru.com , one of the default templates of the blogger.

  •      Biju Subhash ( 9:29 AM on 1/6/09 )

    Nice Post you have here :D
    Thank you,

    Biju Subhash

  •      Max ( 11:40 AM on 1/6/09 )

    hi Biju Subhash
    thanks for your kind words.

  •      nazli ( 4:42 AM on 1/8/09 )

    Hi Max, lets me try this one: could you please tell me any other template that has horizontal menu by default and that I can incorporate in to my own?

  •      Max ( 2:19 AM on 1/9/09 )

    hii nazli
    You can find all templates with horizontal menu very easy
    please go to our top search box
    and type there ” horizontal menu ”
    then click enter,
    and you’ll find tonz of templates.

  •      mery ( 3:34 AM on 1/26/09 )

    :s.7.s: ayuda baje la plantilla ami blog pero no tiene pestanas, quiero agregarselas inicio/contacto. etc como hago. Gracias

  •      Edward/Azul ( 12:19 AM on 1/29/09 )

    can anyone of you help me put navigation on my blog? please please please? this is my site, http://kulayazul.blogspot.com/ please help me Im begging you!

  •      Max ( 10:14 PM on 1/31/09 )

    hi Edward/Azul
    hi mery
    thanks for waiting
    we’ll add new blogger tutorial soon to help you adding top navigation menu for blogger templates.
    please wait,
    thanks

  •      ari ( 11:57 PM on 2/17/09 )

    hai max, i’m new in this blogger things and i’m using notepad chaos templates and try to edit the horizontal menu…but failed! because when i’m copied the top menu and try to Ctrl F at edit html…it doesn’t works…

  •      Anam ( 4:09 AM on 2/25/09 )

    hey max..i have a vertical navigation menu..can u tell me how to use this with the vertical menu?im using bloggers default template..dotted..thanx

  •      rose ( 6:48 PM on 2/26/09 )

    i didn’t understand :(

  •      BloggerTinker ( 8:30 AM on 3/20/09 )

    Nice tutorial Max! ^_^

    I also made a tutorial about Navigation Tabs/Links but mine is using CSS Tab Designer. Its really easy. Just COPY and PASTE! To all visitors and readers try this out:

    Navigation Tabs in Blogger using CSS Tab Designer

    Thanks! ^_^

  •      Stone ( 8:36 AM on 5/7/09 )

    Good instructions, these are much helpful to me! I love it.

    These will help the others too.

  •      Max ( 7:11 AM on 5/8/09 )

    thanks Stone, you are always welcome.

  •      zizi ( 11:13 AM on 5/11/09 )

    Hi max!
    I followed all the instructions you gave about editing the top. nav. bar.at first it seemed as if it worked,but when i clicked on the link to edit its content(eg. about,contact) I saw a warning: “Object can not be found!404″ What does that mean? What am I supposed to do to edit again?
    Thanx in advance!

  •      Max ( 11:21 AM on 5/12/09 )

    hi zizi
    it’s very simple. write new post
    (eg. about,contact) then make it’s date very old, like 2005 to make it hidden
    and just publish it, then take it’s link and past it into the menu instate of # in href=’#’

  •      manish sharma ( 4:12 AM on 5/17/09 )

    Can we add top menu links to our blog if its not available in our template?
    Please help me doing this.
    Thanx.

  •      Max ( 4:19 AM on 5/17/09 )

    hi manish sharma
    yes you can,
    i’ll add a tutorial about this trick as soon as i can.

  •      Qasim ( 6:40 AM on 6/19/09 )

    very very nice i was just searching the internet to find this trick.thanx

  •      carmen ( 5:45 AM on 6/25/09 )

    i can’t seem to remove the aboutus link/blog and i can’t find it in the html either…is it in the gadgets section?

    thank u

  •      joe ( 8:40 PM on 7/7/09 )

    hi max…good tutorial..tx a lot…

  •      beben ( 6:54 PM on 7/22/09 )

    ukh !!! confuse ~!#@$%&^*()_

  •      Harrionx ( 11:40 AM on 7/26/09 )

    OMG U SAVED ME!!!! LUV U, BLESS U!!

  •      balaji ( 2:59 AM on 10/30/09 )

    what about horizontal menu with vertical submenu

  •      Connie ( 3:29 PM on 11/13/09 )

    Hi Max, Thanks for the informative posting. As you instructed, I created a Contact Us form. But when I tried to post the URL to the HTML in my blog template, I got the following error:
    “Error interpreting blog template

    LHS of numeric is null before 56 in http://www.abucketproduction.com/2009/11/contact-us.html“. This the URL as imbedded in the code: expr:href=’http://www.abucketproduction.com/2009/11/contact-us.html’>Contact. Thanks! Connie

  •      Max ( 7:10 PM on 11/13/09 )

    @ Connie ,you don’t have to post your code to html, why do you try to do it.

  •      Connie ( 5:32 PM on 11/14/09 )

    Max, I tried to post my code to the html because I thought that’s what’s needed to make the Contact Us link on the blog menu live — Contact Us

  •      Max ( 8:59 PM on 11/26/09 )

    @ Connie, please try to explain to me what exactly do you need to do, and i’ll help you step by step.

  •      Guest ( 9:26 PM on 11/30/09 )

    How to create top menu navigation ? My template doesn’t have one, or if it have what’s the name ? I don’t using your template, it’s another template. Can you help me :) Thx.

  •      kuazue ( 8:46 AM on 1/21/10 )

    hai there.. In my blog. already got 3 menu on top- home, my choco, gift packet.. I want to add 3 more tab menu to it.. how am I going to do that?

  •      Hediye ( 1:52 PM on 1/30/10 )

    thank u for your advice

  •      lzk ( 4:18 AM on 2/22/10 )

    A tip to note….you should tick the checkbox that says “Expand Widget Templates” in order to find the menu. I can’t find the part at first, but after i tick the box….i can find it

  •      Max ( 12:06 PM on 2/22/10 )

    Hi lzk, thanks for your note, i wish it’ll help a lot of bloggers.

  •      dony ( 4:05 AM on 4/21/10 )

    how to make pulldown menu at horizontal menu thx

  •      Max ( 4:46 PM on 4/22/10 )

    hi dony, this is need another tutorial, i’ll add it really soon.

  •      Martin ( 6:56 AM on 5/25/10 )

    Hey Max.

    I can only add three menu buttons to my template. When I try to add another one it doesn’t show. What do I need to do?

    This is my bloglink:
    http://cashipedia.blogspot.com/

    Great website you have created. It has helped me a lot.

    Cheers,
    Martin

  •      Martin ( 11:41 AM on 5/25/10 )

    No problem Max. I found out how to do it. Just had to change the pixel in the html code. :)

  •      Tatiana ( 11:29 AM on 5/26/10 )

    Hi, I’m so sorry if you’ve already addressed this somewhere and I’m just missing it, but I followed your instructions and they work great, only thing is I don’t know how to make it so that every time a do a new post it sorts it into it’s proper category. Do i have to do this manually somehow? Please, help, I’m new to all of this.

  •      simtoink ( 7:07 AM on 7/27/10 )

    hi.. i can’t add new links.. it can only add up to 3 (Home, Add me and Contact Me)..
    What should I do.. I tried to add one, but it doesnt appear.

blogger spacer my twitter my facebook my rss feeds my google buzz E-mail updates

advertise
Write For Us
Write For Us

Add to Technorati Favorites Web Design Top Blogs
Top Resources blogs Web Development & Design Blogs hihera.com Resources BlogsArts Blogs - Blog Rankings
Templates Blogs - Blog Catalog Blog Directory Click to see how many people are online TopOfBlogs Computers & The Internet Topsites - TOP.ORG  blogarama - the blog directory
 

Featured in Alltop

AllBlogTools.com © 2009 All rights reserved

Home  |  About Us  |  Contact Us  |  Support Blogger Tricks  |  Blogger News   |  Blogger Templates