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('http://lh3.googleusercontent.com/-nNC0xKeTPDo/T_iDKI1a_mI/AAAAAAAABQk/vjM1Z-RfdsU/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('http://lh3.googleusercontent.com/-nNC0xKeTPDo/T_iDKI1a_mI/AAAAAAAABQk/vjM1Z-RfdsU/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.

34 komentar untuk “Membuat Search dalam Blog”

  1. memang penting sih fitur search dalam blog kebetulan diblog aku jg belum di pasang jadi kebetulan nih dapet ilmunya, and practice deh, tks so much...friend.

    BalasHapus
  2. Sob, aku ada cara untuk membuat search form yang canggih dan lebih praktis. lihat aja di http://infotentangblog.blogspot.com/2009/08/title-search-widget.html :D

    BalasHapus
  3. kalo mo munculin isi tiap postingan di dalam blog gmn boss??
    http://layanankita.blogspot.com/

    BalasHapus
  4. ada cara yang lebih mudah membuat search engin dalam blogger yang mungkin boleh di bilang hampir sama tapi kegunaan beda.

    Coba deh liat di blog saya!!!

    BalasHapus
  5. oia blog yang alamatnya di http://weseo.blogspot.com

    Salam kenal dari blog bekasi...

    BalasHapus
  6. sebenarnya itu NGGA PERLU!!!
    tambah gadget aja dari google, ada ko caranya di blogku..
    ga usah pake java script...okk!!!
    liat di blogku!!!
    lagian juga bagusan pakai search engine dari gadget google, lho!
    kalau dari kayak gitu lebih jelek, kalau dari google...bagussssssssssssss.......bgt!!
    coba aja nge-search di blogku, tulis "mighty"

    silakan

    BalasHapus
  7. @♥ syifa ♥ aulia ♥ 'kakcipa' ♥, cara diatas tidak menggunakan javascript lo, coba anda perhatikan lebih seksama.. tapi widget dari google udah bagus juga kok, terserah mau menggunakan yang mana...

    BalasHapus
  8. trims infonya, sangat kepake tuh,
    o..ya yg mau e-book gratis, main dong ke http://www.1001ebookgratis.blogspot.com
    okey...

    BalasHapus
  9. thankz, brkunjung k blog q ya http://armer-islamic.blogspot.com

    BalasHapus
  10. di coba mas... thanks infonya.....

    BalasHapus
  11. mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

    BalasHapus
  12. sob, kode ini diletakkan dimana agar sejajar dengan menu navigazi horizontal nya ?

    BalasHapus
  13. thnaks banget ya.

    search box di http://asalkamutahuaja.blogspot.com/ udah berhasil..

    banyak banget saran dan kritik ttg itu di blog ku.

    makasih banyak :DD

    http://asalkamutahuaja.blogspot.com/

    BalasHapus
  14. Mas Rudy buaek bagt...... jd tambah pinter ngeblog nie..
    syukron katsir........

    BalasHapus
  15. thx bro... ini berguna sekali buat aq

    BalasHapus
  16. bro klau saya protect blog saya (gak bisa di copy postingannya)apa bisa q nulis kata2 yang q cari di textfield areanya.....

    BalasHapus
  17. thanks banget gan
    http://downloadfilm007.blogspot.com/

    BalasHapus
  18. Thanks Gan mantab infonya pembelajaran banget, walau tema ane sudah default mempunyai search engine sendiri, setidaknya saya jadi lebih mengetahui modus scriptnya

    BalasHapus
  19. Pusing ane, kotak search ane ga mau nampilin hasil pencarian nya . tapi kalo di cari manual, postingan nya ada. ada yang bisa bantu?

    BalasHapus
  20. salam kenal, makasih infonya

    BalasHapus
  21. wah ngebantu banget

    salam kenal

    www.agoblogs.co.cc

    dikunjungi ya gan

    BalasHapus