Navigation Horizontal Bar

Here are the steps to add a Horizontal Navigation Menu bar.

     

Ø  Login to blogger
    

Ø  Click Design
    

Ø  Then click Edit HTML
    

Ø  After that, find this code ]]></ b: skin>

                                                        

Ø  If you have found, paste the code below exactly above the code

.container {width: 860px;background:#000; margin: 0 auto;}
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 860px;
list-style: none;
position: relative;
font-size: 1.2em;
background: url(.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9}
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 860px;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

Ø    After that, place the following code below ]]></ b: skin>

<div class='container'>
<ul id='topnav'>
<li><a href=''>Home</a></li>
<li>
<a href='#'>About</a>
<span>
<a href='#'>The Company</a>
<a href='#'>The Team&lt;/a>
<a href='#'>Careers</a>
</span>
</li>
<li>
<a href='#'>Portfolio</a>
<span>
<a href='#'>Web Design</a>
<a href='#'>Development</a>
<a href='#'>Identity&lt;/a>
<a href='#'>SEO &amp; Internet Marketing</a>
<a href='#'>Print Design</a>
</span>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Ø      After the above code is entered correctly the next step we add the code below to call the code that we added earlier. copy and paste the code below the above code <div id='content-wrapper'>

  

ü  To put the url address code # destination

ü  After that save your template

Now look at the results.

 

These may help you, plus you may find a better customizable horizontal menu to use:

ee following sites for navigation menus:

ü  CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/cssli ... tegory/C1/

ü  CSS Library Vertical CSS Menus: http://www.dynamicdrive.com/style/cssli ... tegory/C2/
http://www.dynamicdrive.com/dynamicindex1/
http://www.cssplay.co.uk/menus/

ü  How to Style an Unordered List with CSS: http://www.webreference.com/programming ... index.html

ü  Sexy Drop Down Menu w/ jQuery & CSS: http://www.noupe.com/tutorial/drop-down ... y-css.html

ü  NavDock jQuery Plugin (Ver 1.5.1): http://plugins.jquery.com/project/NavDock

ü  Making CSS Rollover Buttons: http://www.elated.com/articles/css-rollover-buttons/

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
http://www.creativepro.com/article/drea ... tion-links
http://efuse.com/Design/navigation.html

ü  Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/

ü  Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/

ü  The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/04/ ... down-menu/

There are also some free online menu amkers you can use.

Favicon

Look at the top of your browser near the Back button and WWW address to see the Favorites Icon.
The Favorites Icon will show up next to the URL (the http:// web address) in your web browser near the top of the window (close to the Foward and Back button.

The steps to putting a favicon.ico on your website are:

• Create a 16px X 16px, 16 colour image with either a .bmp or .gif extension.

Your graphics editor should have a setting for 16 colours. It needs to be 16px X 16px, anything other than this will be ignored by browsers most times.
Another option is to download a free icon editor and make your own through that.

• Convert your image to the .ico format if it's .bmp or .ico.

You can't just rename the image extension - it HAS to be converted with a special program or it won't work. Use an icon converter, then save the converted file as favicon.ico. If you are creating several icons to use, call each one something different - but remember it needs to have the .ico extension.

• Upload your favicon.ico into the root directory of your website.

The root directory is where your main index.html page is. Browsers look for the favicon.ico here. If you're providing a link in your pages to the icon, then you can store them wherever you wish - in a folder just for icons, on another server, as long as you provide the path/url to where it is so browsers know where to look for it.

• Insert a link to it in all your pages that you wish to use the favicon.

If you have called your icon favicon.ico and you uploaded it into your root directory, you don't NEED to put any code in your pages. However, sometimes the favicon won't show for some browsers, so to put a link in might be a wise thing to do. You will also need to put a link in if you want to use something other than a file called favicon.ico or if your site is a subdomain or a free hosted site (ie: not your own domain name). This is because you need to tell the browser to look for THAT image for that page in THAT folder.

Put this piece of code somewhere between the <head></head> tags on your pages:

<LINK REL="SHORTCUT ICON" HREF="http://www.yourdomain.com/name_of_icon.ico">

If you have a 'secure' site, you will need to provide the path using https: 

<LINK REL="SHORTCUT ICON" HREF="https://www.yourdomain.com/name_of_icon.ico">

That's about it. If you've gone through these steps, you can try bookmarking your page to see if the favicon shows up. Of course, if you already HAVE the page bookmarked, it won't show - as your browser checks for the favicon at the time of bookmarking. You will find if you remove your site from favourites and add it again, it probably won't work still, as there will be traces of the bookmark left somewhere on your computer so it won't check. The best way to test it in this case is to get a friend to do it.