Membuat Search Box di Blogger

Inwepo Tutorial - Untuk membuat Search Box / Kotak pencarian di blog, ada beberapa cara yaitu:

Cara 1
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.

Cara 2
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://tutorial.inwepo.com/search" method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

7. Ganti nama http://tutorial.inwepo.com dengan alamat domain kamu.

Cara 3

Tahapnya sama dengan cara 2, hanya mengubah kodenya saja :

<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/AVvXsEh9njgI08N4EdROwc8pOBrE-oxqhsP3Jd-cZTg4SCElHrFhI7RmAizziC3Cz_LXBwtUYMAhE0L3Ld_SFaYKa-wycdq9WDhj_9k3x_PFtdjkEnkkjH9JFWwYOmVdwdRpbIsHywT6578IG3TF/s1600/Search.png) center right no-repeat; } #s::-webkit-input-placeholder, #s:-moz-placeholder { color: #607078; } </style>

tampilan akan terlihat seperti di bawah ini.