Sep 22, 2010

Web Design Editing blogger top menu Links

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.

0 comments:

Post a Comment