Kotak pencari dengan background transparan

Jumat, 28 Mei 2010
Kotak pencari sejatinya berfungsi untuk memudahkan pengunjung mencari artikel yang mereka butuhkan, terutama apa saja yang pernah kita posting di blog kita sebelumnya. Dalam masalah ini sebenarnya Blogger.com pun telah menambahkan fitur ini, namun karena alasan yang bermacam-macam banyak dari pengguna Blogger yang tidak menggunakan fasilitas ini. search-transparent

Dalam posting kali ini saya ingin belajar sekaligus berbagi tentang cara membuat kotak pencari dengan tampilan transparan yang artinya kotak pencari ini akan tampil mengikuti warna latar atau background dari blog kita, kecuali icon gambar tulisan serta garis/border.

Oke... untuk mempersingkat waktu Silahkan copy kode di bawah ini, lalu pastekan di bawah kode ]]></b:skin> setelah selesai jangan lupa disimpan.
Ini untuk CSSnya ↓
#search { 
  width:240px;
  font-size:11px;
  float:$endSide;
  margin:0; padding:0;
  }

#searchbox {
  padding:0;
  margin:0;
  }

#search input {
   background:transparent;
   color:#000;
   float:$startSide;
   margin:10px 0 0 10px;
   width:178px;
   padding:3px 7px;
   border:1px solid #000;
  font:normal 11px arial,        verdana, Times New              Roman;
    }

#search .btn {
   margin:7px 0 0 3px;
   padding:0;
   width:auto;
   border:0;
   }
Yang berwarna merah adalah warna teks dan garis dari kotak pencari.
Untuk Blogger Mobile atau Blogger yang menggunakan ponsel dapat menggunakan Aplikasi Bolt browser, caranya copy kode di atas namun sebelumnya pastekan dikolom kosong dahulu misalnya pada kolom teks area, bila lebih dari 256 karakter dan kelipatannya berarti sobat harus memotongnya dalam beberapa bagian dengan catatan tidak mengaktikan Inline Editing pada pengaturan atau Preferences.

Selanjutnya tuju halaman Tata letak, klik Tambah Gadget, Pilih HTML javascript lalu pastekan kode di bawah ini di dalam kolom yang tersedia, setelah selesai lalu klik simpan Perubahan.
Ini untuk HTMLnya ↓
<div id='search'>
  <form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id="searchbox" maxlength="200" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari !...&quot;;}" onfocus="if (this.value == &quot;Cari !...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari !..." />
<input class="btn" name="" src="http://i43.tinypic.com/2zdn05e.jpg" width="30" height="30" imgmax="800" type="image" value="Go" />

   </form>

</div>
red* Alamat Gambar.
Silahkan ganti alamat gambarnya dengan icon gambarnya yang lebih menarik. Untuk contohnya sobat dapat lihat diblog percobaan saya disini atau di blog ini juga.

15 komentar (Kotak pencari dengan background transparan)

Posting Komentar
  1. mixedfresh » Mei 28, 2010 9:52 PM | permalink

    boleh di coba nih, nambah ilmu lagi.. thanks tutorialnya

  2. Kang Salman » Mei 28, 2010 11:57 PM | permalink

    Kunjungan Balik... bagus neh.. sip
    optimasi seo secara offline

  3. Tihang » Mei 29, 2010 5:32 AM | permalink

    @mixedfresh
    sama-sama..

    @kang salman
    optimasi seo secara online ??... segera ke Tkp.

  4. angger » Juni 02, 2010 10:54 AM | permalink

    makasih infonya,langsung dicoba nich^_^

  5. infophone-kdr » Juni 02, 2010 8:37 PM | permalink

    Mantep nich sobat tutorialnya bs dipraktekan langsung nich,slm...:D

  6. Dev » Juni 05, 2010 6:45 PM | permalink

    Berkunjung sobat :)
    nice info..

  7. Tihang karas » Juni 11, 2010 10:10 AM | permalink

    To: Dev

    sory, form commentnya gak bs di akses menggunakan browser Mobile...

  8. Kontes Seo » Juni 12, 2010 12:54 PM | permalink

    mantep sob......thank's atas infonya

  9. Gamers » Juni 12, 2010 2:01 PM | permalink

    ini kolom search nya ...pasti bisa cari semua isi blog kita kan bro??

    kolom search qw bermasalah nich...

    kl iya...qw coba dulu...

    dtunggu balasannya ya bro... thx :D

  10. Tihang karas » Juni 12, 2010 9:53 PM | permalink

    @Kontes seo
    sama-sama

    @Gamer
    Inya 4JJI bisa semua...

  11. Rchymera|Blog™ » Juni 15, 2010 5:01 PM | permalink

    Keren nich Mas tutornya,btw langsung menuju TKP dan slm knl...:D

  12. darahbiroe » Juni 16, 2010 11:20 AM | permalink

    makasih untuk kode css nya
    salam kenal
    :D

  13. Tihang karas » Juni 16, 2010 5:35 PM | permalink

    Sama-sama....

    Salam kenal kembali.

  14. Gamers » Juni 17, 2010 5:47 AM | permalink

    kunjungan bro....kunjungan balik ya... thx :D

  15. Allien 99 » Juli 14, 2010 10:08 PM | permalink

    thanks 4 sharing.. bermanfaat dan inspiratif. salam kenal dan kapan2 mampir ke blog ogut ya sob.. :)

Back to form

Mohon berkomentar sesuai topik posting di atas !