Cara membuat tombol Search atau Kotak Pencarian menggunakan Css pada blog, disini kita akan melakukan sedikit metode dengan menggunakan CSS kode pada sebuah blog. Silahkan ikuti petunjuk berikut ini :
- Login ke dashboard blogger Anda --> layout --> Edit HTML
- Scroll ke kebawah dan cari tag </head> untuk lebih mudah gunakanlah Ctrl+F.
- Copy kode di bawah ini dan paste tepat sebelum tag </head>
<style type='text/css'>
div#search { background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnapF7a1hoLS1Yn1QOUWB-p8TWR7AEtUoXbTlyGnd5HjV3Lq7glXtaRisvptk2g9gtt5V-LHC6QJCgz2iT_ezs_woaPF7enUFMgWkVdcsjSORwNvjlEgV4b0Nf3-usRVIUD8SWuLA24V3e//') no-repeat scroll left top;margin: 0; float: right; width: 320px; height: 44px; }
div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }
</style>
- Sekarang simpan template kamu
- Pergi ke Layout --> Rancangan Halaman dan klik "Tambah gadget"
- Pilih "html/java script" dan tambah kode yang diberikan dibawah ini dan simpan.
<div id='search'><form action="http://NAMABLOGMU.blogspot.com/search" id='search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == "") {this.value = "Type your search here...";}' onfocus='if (this.value == "Type your search here...") {this.value = ""}' type='text' value='Type your search here...'/></p>
</form></div>
Catatan : Ganti "NAMABLOGMU" dengan nama Blog kamu
- Simpan dan lihat hasilnya
SELAMAT MENCOBA!!
0 Komentar untuk "Cara Membuat Tombol Search Dengan CSS"