Home » Home » , » Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Di Posting Oleh Munawir Pada Tuesday, 16 February 2016 | 11:53

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 dengan Kotak Pencarian yang berada di samping kanan Menu Navigasi. 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>

/*-- (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-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff;
padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE
url(http://lh3.ggpht.com/_15FopxVONSo/THEhOlDrX4I/AAAAAAAAD28/5oYAsTcO0G8/search-icon.gif)
no-repeat left top;

width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

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

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 ==
&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.  Kalau sudah, Save Template lalu lihat hasilnya.

Selamat Mencoba..!!
Ayo Beriklan
Jika Ini Bermanfaat, Sobat Tidak Perlu Berkomentar
Cukup LIKE dan SHARE Ke Teman Yang Lain Melalui Media Sosial Dibawah Ini atau BERLANGGANAN UNTUK UPDATE SOFTWARE DAN GAMES SOBAT Dibawah:
Berlangganan Untuk Update Software dan Games Anda
Klik Untuk Berlangganan
Terima Kasih Atas Kunjungan Anda
Judul : Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog
Ditulis Oleh : Akun Diretas
Updated : Tuesday, 16 February 2016 | 11:53

Perhatian..!!
KALIMAT atau LINK dalam Artikel ini Kami ijinkan sebagian (Bukan Keseluruhan) untuk direpost. MENCANTUMKAN LINK dari Artikel ini sebagai SUMBER adalah sepenuhnya terserah Sobat. Komentar (Bukan Spam) dan LAPORAN LINK RUSAK sangat Kami harapkan dari Sobat.
Terima kasih atas perhatiannya..