Add Horizontal Navigation Menu/Link For Blogger Beta

How To Add Horizontal Navigation Menu/Link For Your Blogger Beta

( Update : 13/09/2008 )
Please Backup your Templates First !!!

• Step I

/* Start Code 1 ----------------------------------------------- */

#navigation{
height:28px;
line-height:27px;
margin:0 1px;
background:#1B90DF repeat-x url(http://i284.photobucket.com/albums/ll23/ditani-image/ditani_blue3.gif);
color:#ffffff;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #0066CC;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:10px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #baecfe;
}

#navigation .selected,#navigation a:hover{
background: #00138C repeat-x url(http://i284.photobucket.com/albums/ll23/ditani-image/ditani_blue3.gif);
color:#ffff00;
text-decoration:none;
}

/* END Code 1 ----------------------------------------------- */


Copy & Paste Code 1 (under #header or #header-wrapper)
like this

#header {
height: 110px;
margin: 0px;
padding: 0px;
background-color: $headerBgColor;
}
(Paste Code 1 here)

================================================

Don't forget to save templates !!!

================================================

• Step II

Go To Page Layout and Add a Gadget Chose HTML/java Script
then Paste code Below (examples)

Code 2

<br /><div id="'navigation'"><br /><li><a href="'http://ditani.blogspot.com'">Ditani</a></li><br /><li><a href="'http://www.google.com'">Google</a></li><br /></div><br />


Note : U can Change All link For Your Navigation Menu or Link and U can Make Navigation Any Where U want, and Any more ( try change link with adsense Link Unit.....:))

For background menu u can try with this colour ....Click here


Source code from
Blogger Template Style
Name: K2
URL: http://www.geckandfly.com