
7/31/2010 03:22:00 PM

Muhammad Wahyu Rinaldy Bin Salim Musthofabnu Rusy Al- Imam Maliki As- Syafi'i
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:
]]>
2. At the top of the code ]]> 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:
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