Cara Membuat Horizontal Menu Navigasi

Minggu, 10 Januari 2010 by Rully ·
Label:

Kalian tentunya sudah tahu apa itu horizontal menu navigasi. Pada postingan kali ini Rully akan mengupas cara pembuatan horizontal menu navigasi. Langsung aja ya kita mulai..

  1. Masuk halaman Edit HTML
    Kemudian copy-paste semua kode di bawah ini lalu letakan diatas kode ]]></b:skin>

    /*-- (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}

  2. Kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body>
    Kemudian copy-paste semua kode di bawah ini, dan letakkan kodenya dibawah kode warna merah di atas.

    <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>

  3. Kemudian simpan dan lihat hasilnya. Untuk warna latar dan text bisa Anda sesuaikan sendiri.

Bila Anda ingin menambah menu, silahkan buka kembali "Elemen Halaman" .
Kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.


Selamat mencoba

[*]

Artikel Menarik Lainnya



0 komentar:

Posting Komentar

Posting Komentar

Komentar Klasik Klik di sini

Langganan: Posting Komentar (Atom)

Artikel Populer

Komentar Terakhir

Tukeran Link

<a href="http://belajartrikblog.blogspot.com">target="new"><strong>Belajar Trik Blog</strong></a>

Mengenai Saya

Foto saya
Saya adalah pemula di dunia blogging