Cara Edit Search Box (Kotak Pencarian) Pada Blogger

Umumnya sebuah blog dilengkapi dengan kotak pencarian (Search Box), yang fungsinya adalah untuk membantu pengunjung mendapatkan artikel postingan pada blog kita yang topiknya sesuai dengan kata kunci yang dientrikan. 

Berbagai variasi dan gaya banyak diterapkan pada search box yang disesuaikan dengan template blog yang digunakan. Secara default, blogger sendiri sudah menyediakan widget untuk kotak pencarian (search box) namun tampilannya sangat sederhana dan kurang menarik. 

Disamping bawaan dari Blogger, beberapa template juga menyediakan search box yang disesuaikan dengan tema tempalatenya, sehingga lebih menarik, tapi belum tentu sesuai dengan selera dan keinginan kita. 

Pada posingan kali ini, kita akan kupas tuntas cara edit kotak pencarian (search box) sehingga dapat disesuaikan dengan selera kita masing-masing. Postingan ini bukan sekedar menyediakan potongan script yang kemudian di copy dan dipaste pada bagian tertentu sesuai dengan petunjuk yang diberikan seperti kebanyakan kita temui pada blog – blog lain yang membahas cara edit kotak pencarian (search box).

Untuk melakukan edit search box (kotak pencarian) pada blogger template, sebenarnya bisa dilakukan dengan dua cara, yaitu lansung ke program utama pada script thameplate sendri melalui menu edit HTML atau melalui Widget HTML/JavaScript yang sudah disediakan oleh blogger.

Untuk postingan kali ini kita kan menggunakan widget HTML/JavaScript untuk meletakkan hasil edit kotak pencarian (Search Box) tersebut. Artikel ini akan kita kupas tuntas cara edit search box (kotak pencarian) pada blogger, kali ini kita akan mencoba bahas script tersebut baris demi baris sehingga pada akhir postingan ini kita dapat membuat sendiri search box sesuai dengan keinginan dari pada hanya sekadar copy – paste saja.

Berikut cara edit kotak pencarian search box :

1. Buka Dashboard Blogger Blogspot, pilih tata letak, tambahkan widget HTML/Script, seperti gambar dibawah ini :



2. Copykan program dibawah ini pada Widget HTML/JavaScript, seperti berikut :


5. Save

Untuk program yang akan dicopykan pada widget HTML/JavaScript pada langkah 4 diatas adalah seperti dibawah ini :

<style type="text/css">
input:focus::-webkit-input-placeholder {color: transparent}
input:focus:-moz-placeholder {color: transparent}
input:focus::-moz-placeholder {color: transparent}
#searchbox input {outline: none}
#searchbox input[type="text"] {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWq2bTgN0wLRk4rhRNiA8vDn8Jpxt-2zmuIHhSLFYYyJGRXj9nKNSswtu9WxY4bB1KvEaJeRsgDKlFpT5zNRo189hv4HoKm45Ktg7ARqv4JQfg6ta7VETfHJFIwn7VrB0JjiPgQSvYxFz/s1600/search-dark.png) no-repeat 10px 6px #fff;
  border-width: 2px;
  border-style: solid;
  border-color: #006393;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  font: bold 12px Arial, Helvetica, Sans-serif;
  color: #bebebe;
  width: 200px;
  padding: 8px 15px 8px 30px
}
#button-submit {
  background: #006393;
  border-width: 0;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  padding: 9px 0;
  width: 60px;
  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  color: #f3f3f3;
}
#button-submit:hover {background: #0063bf}
#button-submit:active {background: #5b5d60};
  outline: none
}
#button-submit::-moz-focus-inner {border: 0}
</style>
<div style="text-align: center;">
<form id="searchbox" method="get" action="/search">
  <input name="q" type="text" size="15" placeholder="Type here..." />
  <input id="button-submit" type="submit" value="Search" /></form>
</div>

Dan hasil dari program diatas adalah sebagai berikut :

1. Script diatas sebenarnya dibagi atas 2 bahasa program yaitu :

• input:focus::-webkit-input-placeholder {color: transparent} untuk Chrome/Opera/Safari
• input:focus:-moz-placeholder {color: transparent} untuk Firefox 19+
• input:focus::-moz-placeholder {color: transparent} untuk Firefox 18

3. Warna kuning, #search input , bagian ini adalah untuk membuat kotak berupa elips tempat kita meng-entry-kan kata kunci yang akan dicari.

Link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRWq2bTgN0wLRk4rhRNiA8vDn8Jpxt-2zmuIHhSLFYYyJGRXj9nKNSswtu9WxY4bB1KvEaJeRsgDKlFpT5zNRo189hv4HoKm45Ktg7ARqv4JQfg6ta7VETfHJFIwn7VrB0JjiPgQSvYxFz/s1600/search-dark.png  adalah untuk menampilkan kaca pembesar kecil dan tidak ada pengulangan dengan perintah no-repeat dengan posisi 10px 6px  dan warna #fff.

  border-width: 2px;

  border-style: solid;

  border-color: #006393;

Perintah border sesuai dengan namanya adalah untuk mengatur, ketebalan, solid dan warna garis border (batas). Untuk membuat kotak menjadi elips, maka 4 sudut kotak diberi radius dengan perintah sebagai berikut :

  border-top-left-radius: 30px;

  border-top-right-radius: 30px;

  border-bottom-left-radius: 30px;

  border-bottom-right-radius: 30px;

Untuk mengatur lebar search box kita gunakan script : width: 200px; dengan jarak padding: 8px 15px 8px 30px

4. Warna Ungu #button-submit   , adalah tombol untuk melakukan eksekusi pencarian.

Sama halnya dengan #search input, pada #button-submit juga diatur lebar, warna, dan border-radius untuk membuatnya menjadi elips.

5. #button-submit:hover {background: #0063bf}; adalah untuk perubahan tombol search ketika kursor atau mouse kita dekatkan kearah tombol.

6. #button-submit:active {background: #5b5d60};  adalah untuk perubahan warna tombol search ketika tombol tersebut di klik.

7. #button-submit::-moz-focus-inner {border: 0} adalah untuk menyesuaikan tombol ini ketika menggunakan browser Firefox

8. Perintah HTML  dimulai dengan <div style="text-align: center;">  untuk memposikan tombol search tepat ditengah.

 <form id="searchbox" method="get" action="/search">  untuk membentuk form dengan memanggil ID Search box yang style nya sudah kita tetapkan padascript CCS ebelumnya , yaitu : #searchbox. 

Perintah yang akan dilakukan adalah search melalui script action="/search"

<input name="q" type="text" size="15" placeholder="Type here..." />  adalah script mendeklarasikan kata kunci yang kita ketik dengan kode q, dengan besar huruf adalah 15, dan pengaturan penempatannya menggunakan placeholder.

<input id="button-submit" type="submit" value="Search" /></form>  adalah perintah search yang akan dilakukan ketika tombol  #button-submit  ditekan .

Demikian, penjelasan terkait program diatas.

Dilain kesempatan akan kita bahas tombol search box (kotak pencarian) yang berbeda, seperti sebagai berikut :