Menu Navigasi pada blog merupakan elemen yang
perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan
dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi
di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi
vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu,
kita juga bisa membuat menu horisontal sederhana (tanpa cabang)
ataupun membuat menu horisotal bercabang dengan script css. Seperti
yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.
Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>
Keterangan:
Cari kode di template anda yang paling mendekati dengan kode diatas
5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.
6. Sehingga susunannya menjadi seperti ini:
7. Kalau sudah, Save Template lalu lihat hasilnya.
Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan 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
#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:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.
Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);
4. Setelah itu cari kode 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>
<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>
Cari kode di template anda yang paling mendekati dengan kode diatas
5. Kalau sudah ketemu, letakkan kode berikut 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>
</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 == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/> <input id='searchbutton' type='submit' value='GO'/> </form> </div> </b:includable> </b:widget>
</b:section>
</div>
<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 == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/> <input id='searchbutton' type='submit' value='GO'/> </form> </div> </b:includable> </b:widget>
</b:section>
</div>
6. Sehingga susunannya menjadi seperti 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 ==
"") {this.value = "cari artikel
disini...";}' onfocus='if (this.value == "cari
artikel disini...") {this.value = ""}'
type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Kalau sudah, Save Template lalu lihat hasilnya.
Jika anda tidak mau menggunakan kotak
pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah
link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.
Selamat mencoba. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar