Tips to Make the Horizontal Menu

     There are pingin create a horizontal menu but does not know how?
This way, eh but wait a minute, whether it is a horizontal menu? Horizontal menu is a menu arranged horizontally (sideways).

1. Login to the blogger continues to select Layout -> Edit HTML, then check the  
    box "Expand Widget Templates ". do not forget to backup the template first.
2. Find a script like this ]]></ b: skin>, if you found a copy of the script below and  
    put it on top .

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Writing in bold can you replace with the images (text below the image) above earlier. For example, if you choose a red color then the script will be like this;


background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;




3. Copy the following script

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


4. Replace http://trik-tips.blogspot.com with links that you want to go. The link can be either address other blogs or posting links km. To get the link posting how right-click on the title postingannya then choose "copy link location" (for mozilla firefox).
Then the bold text you can change the text that you like. Text is the text that appears in the button / menu.
5. How to install there are several kinds depending on the template used, one example of that is put it this way
find the following code:


<div id="content-wrapper">


way he'll find easy, copy the script above and press Ctrl-f then paste it in the find box, direct nha met her. If you found a copy of the script that was on it

6. Save the edit.
7. See the results.
8. if the result is not good / ragged trying to script had been moved into place, eg moving keatasnya the above code </ div>. kalao not suitable also place a try again the above or well below it, so continue until you find a suitable place.
9. If still does not work also try this way:
- Find the following code:

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

continue to replace the text in green so it looks like:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

continue on Save

Click Page Elements tab, then in the headers click Add a page element and select HTML / JavaScript and paste the script link in the box content was kept to save, that's where the above, try to drag down a bit, so, continue to save and see the results.

the result would be different in each template.
if successful means you are clever, if failure means you are less clever: try again examined the steps and understood his point. OK, Good luck .....


source : http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html     

Posted in: Tips,Tips Internet,Uncatagorized