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 == "") {this.value = "Cari !...";}" onfocus="if (this.value == "Cari !...") {this.value = ""}" 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)
boleh di coba nih, nambah ilmu lagi.. thanks tutorialnya
Kunjungan Balik... bagus neh.. sip
optimasi seo secara offline
@mixedfresh
sama-sama..
@kang salman
optimasi seo secara online ??... segera ke Tkp.
makasih infonya,langsung dicoba nich^_^
Mantep nich sobat tutorialnya bs dipraktekan langsung nich,slm...:D
Berkunjung sobat :)
nice info..
To: Dev
sory, form commentnya gak bs di akses menggunakan browser Mobile...
mantep sob......thank's atas infonya
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
@Kontes seo
sama-sama
@Gamer
Inya 4JJI bisa semua...
Keren nich Mas tutornya,btw langsung menuju TKP dan slm knl...:D
makasih untuk kode css nya
salam kenal
:D
Sama-sama....
Salam kenal kembali.
kunjungan bro....kunjungan balik ya... thx :D
thanks 4 sharing.. bermanfaat dan inspiratif. salam kenal dan kapan2 mampir ke blog ogut ya sob.. :)
Back to form