Membuat Kotak Search Elegant Di Blog Cara kucoba.com
Advertisement:
Membuat Search Engine di Blog
Mirip Kucoba.com
Membuat Kotak Search Elegant Profesional Di Blog versi kucoba.com - bulan lalu ada pertanyaan dari sahabat kucoba seperti ini :

kang, mau tanya,bagaimana cara membuat kotak search engine seperti kucoba.com saat di klik maka tulisan kucoba search hilang sendiri? khasan nova


Untuk demonya silakan Anda klik pada tulisan kucoba search di atas.
Bagaimana cara membuatnya?


Langkah 1
  1. Login ke Blogger Pilih Rancangan atau layout > Pilih Edit HTML
  2. Cari kode #search di blog Anda. jika di ketemukan hapus kelompok kode #search tersebut!
  3. Copy dan ganti degan yang ini
#search{border:1px solid #d2d0c6;  height:26px;  padding:2px; width:230px; text-align:right} #search:hover{border:1px solid #bfbdb1;  background:#fff}
#search input{border:0;  background:none;  color:#99918c}
#s{width:200px; padding:2px;  margin:2px 0 0 0;  background:none}
#topsearch{margin:0px 0 10px 0}
#topsearch
#s{width:190px}
Keterangan:
tulisan warna merah di atas adalah ukuran untuk panjang dari kotak search menu.

Langkah 2
Mungkin ini langkah yang paling sulit khususnya bagi Anda yang tidak terbiasa HTML, kang salman pun sedikit kesulitan menjelasnya bagaimana cara agar di langkah ini Anda langsung bisa tanpa harus bertanya lagi :p

Oke, sebagai gambaran dasar, kode search menu sebelumnya terletak di menu navigasi, jadi
  1.  Pertama silakan cari kode menu navigasi di blog Anda.
  2.  Di kelompok meni navigasi blog Anda silakan cari kode <div id=Search

       * Mungkin namanya akan berbeda-beda di setiap temlplate jadi silakan sesuaikan
  3. Tips tiga adalah tekan tombol f3 lalu masikan kode searchform lalu tekan tombol Enter jika sudah ketemu. hpus kode search tersebut, di mulai dari <div id='search'> sampai kode </div> terdekat
<div id='search'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot; kucoba search..&quot;;}' onfocus='if (this.value == &quot; kucoba search..&quot;) {this.value = &quot;&quot;}' type='text' value=' kucoba search..'/>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<input id='searchsubmit' type='submit' value='Search'/>
</form>
</div>
Keterangan:
tulisan yang kang salman tandai orange di atas dapat kamu ubah dengan kata-kata sendiri, misalnya kalau di blog ini "Cari"
sedangkan untuk kata-kata didalamnya silakan ganti kucoba search dengan kata-kata yang Anda inginkan

Setelah Anda menggantinya silakan simpan template dan lihat hasilnya :)
Jika gagal atau tidak bisa, silakan coba lagi sampai berhasil!

Demikianlah Cara Membuat Kotak Search Elegant Di Blog
Semoga bermanfaat


Lihat Juga:

Jangan asal copy paste! baca aturannya disini
Post By Kang Salman
www.kucoba.com

Jasa Pembuatan Blog > Jasa Pembuatan Banner Iklan > Jasa Pembuatan Logo Blog Order asksalman19@gmail.com
Advertisement:
Judul : Membuat Kotak Search Elegant Di Blog Cara kucoba.com Deskripsi : Admin : Terbit Rating : 5 stars

  • Lifestyle