Adsense|Innovation|Blog News|Tutorial

Here tutorial how to make CSS Horizontal Navigation Menu For Bloggers/Websites, follow this simple step :
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag.

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQict6_gAl7_KQGVX808grN0NjnyfOpSg6l9Sbj7wZ2ye5ibIHBpAjzOQpT0tO-cip3lwLfYMsDJgeJJR6LOzENdzwKmWhazkvYXReGb59vITwo16xb4ae4DDiG6NwzWjfaje2__wFck/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
 font-weight: normal;
 padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd1_hK4Mvvlt8n2YSdPbIkItIZZu7-1QRlAYyA-jmaxXCrzA5vV0l_Xyc7V6DI6-ASkttIG2MTEvo2UWgxCTrnFl1QLFlC88WgkW1jiixi5ZmQlS9ZMvzCq7W9Al1aIk6W5Z8GgPkB9I/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggQict6_gAl7_KQGVX808grN0NjnyfOpSg6l9Sbj7wZ2ye5ibIHBpAjzOQpT0tO-cip3lwLfYMsDJgeJJR6LOzENdzwKmWhazkvYXReGb59vITwo16xb4ae4DDiG6NwzWjfaje2__wFck/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd1_hK4Mvvlt8n2YSdPbIkItIZZu7-1QRlAYyA-jmaxXCrzA5vV0l_Xyc7V6DI6-ASkttIG2MTEvo2UWgxCTrnFl1QLFlC88WgkW1jiixi5ZmQlS9ZMvzCq7W9Al1aIk6W5Z8GgPkB9I/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

Note: Please host menu.jpg and menuhov.jpg images yourself.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.

<div id="foxmenucontainer">
<div id="menu">

<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>

<li><a href="#" title="#">Subscribe</a></li>

<li><a href="#" title="#">Register</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>
</div> 
</div>

You are done.Look at the picture below.

Anda Sudah Baca Yang Ini? :

all label content

html

Tips And Trick

css

google

feed

Tips and Trick How To Compress CSS for Better Page Loading time

Linkbar

INNOVATION KLUWAN TWO

Saturday, February 13, 2010

CSS Horizontal Navigation Menu For Bloggers/Websites

Anda Sudah Baca Yang Ini? :

0 komentar:

Klik Here To Show All Comment

Post a Comment

Table of Content

Followers

Contributors