Cara membuat form search keren



Sebelumnya saya sudah memberikan tutor cara membuat form search. Tetapi, tampilannya terlalu biasa saja kan? Nah saya mau kasih tutor kesobat" disini cara memodifikasi form searchnya. Tetapi, kemungkinan form searchnya sedikit tidak sempurna, coba saja dulu deh. Caranya tidak begitu rumit, sobat bisa lihat tutornya dibawah ini.

    1. Masuk ke Akun blogger sobat, masuk ke Rancangan

    2. Klik Edit HTML dan centang "Expand  template widget"

    3. Cari kode ]]></b:skin> (Supaya gampang Tekan CTRL + F dan ketik ]]></b:skin>)


    4. Copy kode dibawah ini di atas kode ]]></b:skin>
#search-nav {
 float: right;
background: white;
margin: 0 5px 0 5px;
width: 200px;
height: 23px;
border-radius: 3px;
border: 1px solid black;
padding-left: 3px;
}
#search-nav .text {
  margin-bottom:5px;
  }
#search-nav input {
  background: transparent;
  border: none;
  color: black;
  width: 180px;
  height: 15px;
  margin-top: 2px;
  margin-bottom: 2px;
}
#search-nav #searchsubmit {
  width: auto;
  height: 17px;
  margin-bottom: -1px;
}
    5. Lalu Copy kode dibawah ini dan pastekan dimanapun. Bisa disamping Navigasi dan lainnya.
<div id="search-nav">
<form action="http://blogseno.blogspot.com/search">
<input class="text" name="q" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" size="30" type="text" value="Search..." />
  <input alt="Search" id="searchsubmit" src="http://cdn1.iconfinder.com/data/icons/KDE_Crystal_Diamond_2.5_Classical_Mod/22x22/actions/find.png" type="image" value="" />
  </form>
</div>
    6. Simpan dan lihat hasilnya.

Selamat mencoba dan maaf karena tidak update beberapa hari.


Nb: Apabila tidak sempurna comment saja :)

6 comments :