Membuat Menu ( Versi 2)

Terima kasih kepada temanku yang bertanya bagaimana cara membuat menu horizontal??Nah kali ini saya akan memberikan solusinya.Sebenarnya banyak yang cara yang digunakan untuk membuat menu horizontal salah satunya dengan cara ini.Mungkin cara ini lain dari pada yang lain.Ok ddeh langsung saja kita mulai...

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini ]]></b:skin>

6. Kemudian taruh kode ini diatasnya :

/*-- (Menu/Nav) --*/

#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}

#nav-left{float:left; display:inline; width:600px}

#nav-right{float:right; display:inline; width:100px}


#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0;
font:1.0em Arial,Helvetica,sans-serif}

#nav ul li{float:left; list-style:none}

#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px;
padding:5px 4px; text-decoration:none}

#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px;
padding:5px 4px}

#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px
7px}

/*-- (Search) --*/

#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px
2px no-repeat; -moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;


-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right;
height:25px; margin:0 0px 0 0; width:180px}

* html #search{margin-right:8px}

#search input{font-family:Verdana,Arial,Helvetica,sans-serif;
background:transparent; border:0; color:#555; float:left; font-size:12px;
margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

7. Kemudian cari kode ini <div id='outer-wrapper'><div id='wrap2'>

8. Taruh kode di bawah ini dibawah kode diatas :

<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes'
showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:title'/>

<div id='nav-left'>


<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>


</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>


<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform'
method='get' name='searchform'>

<b:if cond='data:title'/>

<div id='search'>

<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;)
{this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value ==
&apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text'
value='Cari artikel disini'/>


<input id='searchsubmit' type='hidden' value='Search'/>

<data:content/>

</div>

</form>

</div>

</b:includable>

</b:widget>

</b:section>


</div>

9. Save dan lihat hasilnya.

Artikel Yang Berhubungan :