Membuat Search dalam Blog

Fitur "search" sangat berguna untuk menemukan kata-kata kunci yang ingin dicari. Dalam blog sudah barang tentu memiliki kata kunci tertentu yang terletak dalam postingan. Coba bayangkan ketika kamu berkunjung ke suatu blog, kemudian ingin mencari kata atau frase kata tertentu untuk dibaca. Namun dalam blog tersebut tidak memiliki fasilitas search, terpaksa deh kamu mencari manual dengan membuka postingan satu per-satu. Beruntunglah yang punya blog, apabila kamu termasuk orang yang sabar. Maka dari itu fasilitas "search" sangat bermanfaat bagi kelestarian suatu blog.

Nah, dalam trik blogger kali ini, kita akan belajar bersama-sama tentang bagaimana menambahkan fasilitas "search" dalam blog. Kalau kamu jeli, sebenarnya "search" sudah termuat dalam trik membuat menu horizontal sub divisi #nav-right. Yuk, kita review triknya!

Bentuk dasar HTML untuk memunculkan fasilitas "search" adalah sebagai berikut :

<div id='search'>
  <form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
    <label class='assistive-text' for='q'>Search:</label>
    <input class='field' id='q' name='q' placeholder='Search&hellip;' type='text'/>
    <input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/>
  </form>
</div><!-- #search -->

Kalau ingin kata "Search…" dalam kotak search menghilang otomatis ketika kamu klik dalam kotak search tersebut, maka kamu perlu merombak kodenya seperti di bawah ini :

<div id='search'>
  <form expr:action='data:blog.homepageUrl + "search/"' class='searchform' method='get'>
    <label class='assistive-text' for='q'>Search:</label>
    <input class='field' id='q' name='q' onblur='if (this.value == "") {this.value = "Search&hellip;";}' onfocus='if (this.value == "Search&hellip;") {this.value = ""}' type='text' value='Search&hellip;'/>
    <input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/>
  </form>
</div><!-- #search -->

Update (06 Nopember 2012): Untuk kustomisasi lebih lanjut, tinggal membenahi konfigurasi kotak penelusuran dengan menggunakan CSS (Cascading Style Sheets) yang letaknya di antara <b:skin><![CDATA[ … ]]></b:skin>. Contoh seperti yang ditunjukkan di bawah ini:

#search {
  margin: 1.5em 0;
}
#search .assistive-text {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
input#q {
  color: #666;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 6px;
}
input#q:focus {
 color: #111;
}
input#searchsubmit {
  border: 1px solid #ddd;
  border-color: #ccc #ccc #bbb #ccc;
  border-radius: 3px;
  background: #fafafa;
  box-shadow: inset 0 2px 1px #fff;
  color: rgba(0,0,0,.8);
  cursor: pointer;
  padding: .45em .75em;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
input#searchsubmit:hover {
  background: #f5f5f5;
  border-color: #bbb #bbb #aaa #bbb;
}
input#searchsubmit:focus,
input#searchsubmit:active {
  border-color: #aaa #bbb #bbb #bbb;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.15);
}

Menambahkan gambar dalam input#q dengan mengganti nilai dari properti padding (warna merah) serta tambahan kode gambar (warna hijau).

input#q {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCDO9NxAbceJqyLYan25wng9YWS2QJsrym-yRPu595679N_0v4ZEVKjjpex-9mPl342aRzl3XfcgIi7nxuSybZBhvgYvSlPgtS6KeiJL9eJoFGYNJd07BVrQyVR62tDQAku-JOTWccmo/s800/search.png');
  background-repeat: no-repeat;
  background-position: 6px 7px;
  padding: 6px 6px 6px 28px;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 3px;
}

Menghilangkan tombol search dengan mengganti semua selector yang berhubungan dengan input#searchsubmit.

input#searchsubmit {
  display: none;
}

Atau dapat pula di kustomisasi seperti di bawah ini.

input#q {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCDO9NxAbceJqyLYan25wng9YWS2QJsrym-yRPu595679N_0v4ZEVKjjpex-9mPl342aRzl3XfcgIi7nxuSybZBhvgYvSlPgtS6KeiJL9eJoFGYNJd07BVrQyVR62tDQAku-JOTWccmo/s800/search.png');
  background-repeat: no-repeat;
  background-position: 6px 7px;
  padding: 6px 6px 6px 28px;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 3px;
  -webkit-transition-duration: 400ms;
  -webkit-transition-property: width, background;
  -webkit-transition-timing-function: ease;
  -moz-transition-duration: 400ms;
  -moz-transition-property: width, background;
  -moz-transition-timing-function: ease;
  -o-transition-duration: 400ms;
  -o-transition-property: width, background;
  -o-transition-timing-function: ease;
  float: right;
  width: 72px;
}
input#q:focus {
  width: 196px;
}

Hanya dengan sebuah elemen HTML (HyperText Markup Language), kita dapat membuat bermacam-macam gaya dengan memanfaatkan CSS. Bolehkah saya mengutip kata-kata ini, Kode adalah puisi.