Kamis, 06 Juni 2013

Cara Membuat Kotak Search di Blog Dengan Berbagai Model


Kotak Search di Blog Dengan Berbagai Model
Dalam Membuat kotak pencarian dilakukan dengan menambahkan gadget pada blog, bisa dilakukan dengan langkah-langkah berikut:
  • login ke akun blogger anda.
  • klik pada "Tata Letak"
  • dan tambahkan gadget.
Untuk memasang kotak pencarian yang standar dari blog anda bisa pilih "kotak penelusuran" seperti gambar dibawah ini:



kotak penelusuran

Jika sudah klik simpan dan kotak pencarian ( search ) anda akan tampil seperti ini:

    CARI DI BLOG INI


Ingin menbuat kotak pencarian ( search ) dengan model yang lain!! silahkan anda tambahkan gadget tapi kali ini kita menggunakan pilihan HTML/JavaScript seperti gambar dibawah:
html java
Kemudian masukan salah satu model pilihan kode Kotak pencarian dibawah ini :


Model 1 


<form action="/search" id="searchthis" method="get" style="display: inline;"> <input id="search-box" name="q" size="25" type="text" value="Search" /> <input id="search-btn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4yzwg2NF2lJ72IFEFVqOJJR-83arnXZxUyZNLnULwJMn4gbZU5YUpWjXLgPQb4iO2Wuq4Az0n9Z2Oe-_Yd1FN8mK1pSS_i5FXYo2PPHK38W1nAT23fiTU6T6s1GkwtkfECVlQEx9_fc/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;" type="image" value="Search" /></form>


Model 2


<form action="/search" id="searchthis" method="get" style="display: inline;"> <input id="search-box" name="q" size="25" type="text" /><input id="search-btn" type="submit" value="Search" /></form>


Model 3


<form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background-color: black; color: white; font-size: 14px; height: 25px; width: 150px;" type="text" value="Ketik di sini..." /><input id="searchButton" style="background-color: white; border-color: #000000; color: black;" type="submit" value="Cari!" /></form>


Model 4


<form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background-color: blue; color: white; font-size: 14px; height: 25px; width: 150px;" type="text" value="Search..." /><input id="searchButton" style="background-color: white; border-color: #5943ff; color: black;" type="submit" value="Go!" /></form>

Semoga bermanfaat.

1 komentar:

  1. Akhirnya ketemu juga cara buat kotak pencarian dengan gambar... :)

    BalasHapus