Creating a horizontal navigation menu on blogspot with css menu (blue sprite version)

Creating a horizontal navigation menu on blogspot with css menu (blue sprite version). By default, navigation menus are not available at blogspot. To show or make the navigation menu then needs to be added   scripts  (css or html script). In this post we will create a simple horizotal the navigation menu using the css script .Menu script as namely sprite horizontal blue version is a variant of the navigation menu before such massive blue-navigate menus using css script.
.

 To make it do the following procedure:



 1. Log in to your blogger account Select the Dashboard - Design - Edit HTML search the following code:

]]></b:skin>

2. At the top of the code ]]></b:skin> insert the following code

ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://i48.tinypic.com/2zgf4mo.jpg) 0px -30px no-repeat;
float:left;
margin:0;
}

Click "Save Template"

3. Go to Design -> Page Elements
Click  Add a Gadget
Select the gadget html / javascript
Please enter the following script:

<ul id="menu">

<li class="button"><a class="current" href="#">Home</a></li>
<li class="button"><a href="#">Mobile Phone</a></li>
<li class="button"><a href="#">Blogger Tips</a></li>
<li class="button"><a href="#">SEO</a></li>
<li class="button"><a href="#">Credit Card</a></li>
<li class="button"><a href="#" target="_blank">Computer</a></li>
</ul>
</div><!-- End of Nav Div -->

Notes:

In the script above
Replace all signs # at href = "#" with the url of the target or destination url.
for example: http://mycomputerdummies.blogspot.com/
Home, Mobile Phone, Blogger Tips ..., replaced with text that is displayed on the menu

Examples of blogs that use the horizontal menu can be found here Blog

Related Posts by Categories