Cara Membuat Kotak Pencarian Blogspot

GHAPTECH on

Sunday, July 12, 2015

Kotak Pencarian 1
Caranya :
1. Login ke akun Blogge
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :

<form action="http://ghaptech.blogspot.com/search" method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Keterangan : Ganti http://ghaptech.blogspot.com/ dengan nama blog Kalian. Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.

7. Lalu Save dan Lihat hasilnya!

Kotak Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<form action="/search" style="display:inline;" method="get"> <input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/> </form> <style> #s { margin: 0 auto; -webkit-appearance: none; -moz-appearance: none; padding: 12px 48px 12px 12px; -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 200px; height: 16px; color: #3a4449; border: none; outline: none; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); position: relative; z-index: 2; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXN51Xj0_vfgGsnfocU3VTaY40klL77d_WQkl_aQGW4GOrAcOrei7D-anwTA6xXtUaje6bq6F3xXwLNXeXg8t35l39SWD8FD0jlAnuwMxy_qc0PVyyIYsyztWbcblS6AGz-8b7t1eDVc8/s1600/Search.png) center right no-repeat; } #s::-webkit-input-placeholder, #s:-moz-placeholder { color: #607078; } </style>

Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!

Dan Hasilnya nanti seperti ini :

Untuk Lebih lanjut langsung aja ke Sumbernya.



Sumber halaman: Source

Labels: Blogger

Thanks for reading Cara Membuat Kotak Pencarian Blogspot. Please share...!