Cara Membuat Navbar Baru Dilengkapi Kotak Pencarian

Letak kotak pencarian atau search box di blog akan menghemat ruang/space pada halaman blog jika disusun secara berdampingan. Pada bagian navigasi navbar atau navigasi horizontal biasanya akan tersisa ruang, dan anda bisa menempatkan search box tool pada bagian navigasi tersebut.

Tutorial sebelumnya berupa cara membuat menu horizontal pada blog. Tutorial ini kurang lebih sama saj adlam proses pengerjaannya, kita akan membutuhkan sebuah kode CSS dank ode untuk search box nya. Script/kode yang akan kita gunakan cukup aman karena tidak memuat Javascript yang dapat membuat blog menjadi berat.

Setiap blog dan website membutuhkan tool penjelajah agar blog dapat dieksplore dengan mudah oleh para pembaca. Penyediaan kotak telusur pada blog bisa dikatakan menjadi sebuah keharusan, karena kotak telusur mempunyai peran yang cukup penting guna memudahkan para pengunjung untuk mencari suatu konten/posting.

Cara memasang search box sejajar dengan navigasi horizontal header

Login ke Blogger

Pilih Template

Klik Edit HTML, Proceed/Lanjutkan.

Centang Expand Widget

Cari kode ]]></b:skin>

Copy kode dibawah ini kemudian pastekan diatas kode ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7OvTIGKtru3JwDOIC31g7S3gNNnkKhKsuE8h7kdMri8JHeFUqBj9W8YdqR4BUCm_g0Oe4jU9Nq5zTUdSTMUjA6Ne_VHrcBfLz1fEW20-6JrV99jslCVELNMFVmTq3dfhh02H_xG04lnK/) 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;

} 

 Selanjutnya cari kode berikut

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

*Jika tidak ditemukan, cari kode yang mirip.

Copy kode berikut dan paste dibawah kode diatas

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

Lakukan Preview, jika hasilnya sudah tampak silahkan Simpan pengaturan.

Hasilnya kurang lebih akan seperti gambar diatas. Selamat mencoba