Beranda » Tutorial Blogger » Membuat kotak pencarian pada menu navbar 2

Membuat kotak pencarian pada menu navbar 2

Posted by Kerah Ledrek
Sebelumnya saya membuat artikel serupa disini,  perbedaannya adalah dalam proses pembuatan dan hasilnya saja. Proses yang ini lebih mudah dibuat dan loading page-nya lebih ringan serta akurat karena langsung men-load konten blog, bukan cache search engine seperti pada artikel sebelumnya.

Upload Gambar

Langsung saja prosesnya :
1.  Pastikan sobat menghapus kode CSS kotak pencarian dari template sebelumnya jika ada, lalu copy CSS di bawah ini di atas kode ]]>
/* SEARCH BAR */
#searchbar  {
width: 200px;
float: right;
margin-top: 3px;}
.searchform {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqF-2fjZFqNu02urME2zI0TmWDRIxiUQFBzbQaQ6ukaCcoo4PGVlBAxeblS05ybsMahyRskdDRg6K3gpHl0E4oiTT4EEjiYrSjqr2uCDQmHTQMbuqf11CramAqctLdozNNRqP0eFcyr9m/s180/searchbar.png) no-repeat scroll center top;Width: 200px;font-size: 10px;padding: 0;margin: 6px 6px 4px 0px;position: relative; height:25px;}
.searchform input { font-size: 10px; position: absolute; }
.center .searchform { float:none; }
#morefoot .searchform{ float:left; }
.searchform .s{
margin:0;
border: none;
margin: 3px 2px 3px 30px;
margin: 2px 2px 3px 28px\9;
height: 14px;
width:140px;
color: #333;
overflow: hidden;}
.searchform .s:focus { outline: 0; border: none; }
.searchform .searchsubmit { display: none; }

2. Tempatkan kode HTML ini pada posisi menu navbar yang sobat inginkan.
<li id='searchbar'> <form action='/search/' class='searchform' method='get'> <input class='s' id='searchsubmit' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}' onfocus='if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;}' type='text' value='Search'/> <input class='searchsubmit' type='submit' value=''/> </form> </li>
Note : kode-kode di atas sudah saya cek valid HTML5.

Artikel Terkait

2 komentar :

Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.