Cara Membuat Menu Navigasi Horisontal dan Kotak Pencarian di Blog

Oleh Unknown

Kamis, 17 September 2015

Bagikan :

Tweet

Cara membuat Menu Navigasi Horisontal dan Kotak Pencarian di Blog. Menu Navigasi merupakan elemen yang harus diperhatikan di dalam Blog yang mmentingkan penampilan dan style . Ada bberapa jenis menu Navigasi untk Blog, diantaranya Nanigasi Horizontal, Navigasi Vertikal, dlln.

Untuk membuat sebuah Menu Navigasi Horizontal sangatlah mudah, dan saya akan menggunakan menu Horizontal yang sederhana (tanpa cabang). Contoh tampilan menunya bisa Anda lihat dibawah.

Cara Membuat Menu Navigasi Horisontal dan Kotak Pencarian di Blog

1. Login Ke Blog Masing-Masing
2. Klik Edit> HTML
3. Letakan kode dibawah ini Diatas  ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px

Keterangan Ganti Tulisan warna merah diatas , sesuai dengan dengan temmplate Anda. Jika ingin mengganti bacround menu navigasi dengan sebuah gambar, maka tambahkan kode url( alamat Gambar) di belakang kode "warna bacround kotak navigasi tersebut"  Contohnya:
background: #1c4456d url(http://url-gambar);

4. Cari Kode

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

5. Kalau sudah ketemu Copy lalu letakan kode ini dibawahnya.

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

6. Sehingga Urutannya seperti dibawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7. Save Template.
Sekarang Anda lihat hasilnya, Jika anda tidak mau menggunakan kode pencaharian maka hapus saja kode yang dicetak tebal beres kan, Wasalam (http://contohblogspotnih.blogspot.co.id)

Tag : Desain