Membuat Show Hide Search Form Sederhana

Membuat Show Hide Search Form Sederhana

Kotak pencarian dalam sebuah blog atau web ini merupakan elemen penting, sebuah blog atau situs web diwajibkan memasang kotak pencarian. Jika tidak, maka itu termasuk kesalahan dalam desain web karena tidak ramah pengguna (user friendly), Ungkap pakar Web Usability, Jakob Nielsen.

Kotak pencarian harus simple, visible, harus ada di homepage, halaman dalam dan mudah dilihat. Nah untuk itu disini saya akan share Membuat kotak pencarian dengan efek show hide, dan untuk membuatnya silakan ikuti langkah-langkah berikut:

Membuat Show hide search form


Taruh kode CSS berikut sebelum kode </style> atau ]]></b:skin>

/* Show Hide Search Form by Ricky */
form#searchid{position:absolute;right:0px;top:0px;padding:0 20px;margin:0;overflow:hidden;z-index:100}
#searchid label,#searchid input[type="submit"]{display:none}
#searchid input[type="text"]{position:relative;font-family:'Roboto';margin:0;border:0;border-radius:5px;font-size:1.1rem;outline:none;color:transparent;height:30px;width:30px;text-indent:30px;background:transparent;}
#searchid input[type="text"]:focus{background:#fff;color:#111;text-indent:10px;width:100%;}
.idsearch{position:relative;font-family:fontawesome;margin:0;color:#fff}
.idsearch:before{content:'\f002';font-family:fontawesome;position:absolute;top:0;right:0;font-size:1.5rem}

Kemudian letakan kode berikut diantara <body> dan </body> (Misalnya disamping navigasi menu)

<form action='/search' id='searchid' method='get'>
<label for='name'/>
<p class='idsearch'><input id='name' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/></p>
<input name='max-results' type='hidden' value='10'/>
<input type='submit' value='Submit'/>
</form>

Jika di gabungkan hasilnya seperti di bawah ini:

<nav id='nav-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
  <input type='checkbox'><i aria-hidden='true' class='fa fa-align-left'/> Menu</input>
<ul id='menu-click'>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'> Blogger<i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a class='ripplelink' href='http://www.trikricky.com/search/label/Download%20Template?&amp;max-results=8' itemprop='url'><span itemprop='name'> Template</span></a></li>
<li><a class='ripplelink' href='http://www.trikricky.com/search/label/Widget?&amp;max-results=8' itemprop='url'><span itemprop='name'> Widget</span></a></li>
<li><a class='ripplelink' href='http://www.trikricky.com/search/label/Tips%20Blogger?&amp;max-results=8' itemprop='url'><span itemprop='name'> Tips Blogger</span></a></li>
<li><a class='ripplelink' href='http://www.trikricky.com/search/label/SEO?&amp;max-results=8' itemprop='url'><span itemprop='name'> SEO</span></a></li>
</ul>
</li>
<li><a class='ripplelink' href='http://www.trikricky.com/search/label/Info%20Menarik?&amp;max-results=8' itemprop='url'><span itemprop='name'> Info Menarik</span></a></li>
</ul>
</nav>
<form action='/search' id='searchid' method='get'>
<label for='name'/>
<p class='idsearch'><input id='name' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/></p>
<input name='max-results' type='hidden' value='10'/>
<input type='submit' value='Submit'/>
</form>

Simpan template dan lihat hasilnya.

Demikian cara membuat Show Hide Search Form Sederhana, Semoga bermanfaat.
Advertisement
Advertisement

Artikel Terkait

CEO sekaligus Content Specialist di trikricky.com. Jangan lupa bahagia.