Rabu, 26 Februari 2014
Browse Manual »
Wiring »
background
»
dengan
»
kotak
»
pencari
»
transparan
»
Kotak pencari dengan background transparan
Kotak pencari dengan background transparan
Kotak pencari dengan background transparan
Postingan 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>
*merah=alamat gambar
Silahkan ganti alamat gambarnya dengan icon gambarnya yang lebih menarik...
-Semoga Bermanfaat-
Matur Nuwun
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar