Home / belajar blogspot / Blog Tutorial / Belajar membuat Nav Horizontal

Thursday, May 26, 2011

Belajar membuat Nav Horizontal

Date - 

Salam sejahtera bagi kita semua amin, kali ini saya akan membahas tentang tutorial blogspot. sebenernya di blogspot sendiri sudah ada layanan untuk membuat nav horizontal. hhehehehehehehehe

Tapi saya akan membahas tentang javascript membuat nav horizontal, caranya sederhana.

Masuk ke halaman Edit HTML
  •  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}

Kemudian :

  1. Cari kode <div id='outer-wrapper'><div id='wrap2'> letaknya  dekat <body> 
  2. 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.
Semoga bermanfaat bagi kita semua amin

Share this

3 komentar:

Subscribe to: Post Comments (Atom)