Tutorial : Mengubah Tampilan Search Box

Assalamu'alaikum.

Di tutorial kali ini Salsa mau ajarin kamu untuk membuat kotak pencarian yang tidak biasa dari biasanya.

Ini kotak pencarian yang simpel kan?

Kalau mau yang lebih stylish, bentuknya seperti ini

<center><form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background: #FCB8D4; color: #000000; font-size: 13px; height: 17px; width: 150px;" type="text" value="Ketik Disini..." /><input id="searchButton" style="background: #FF8AB9; border-color: #000000; color: #FFFFFF;" type="submit" value="Search!" /></center>

Warna biru itu kode warna background yang bertulisan "Klik Disini...", kamu bisa ubah warnanya.
Warna merah itu warna tulisan "Ketik Disini...", bisa kamu ubah warnanya.
Warna hijau itu lebar search box-nya. Bisa kamu adjust sendiri.
Warna pink itu bisa kamu ubah dengan kalimat sendiri, sesuai selera mu :)
Warna oranye itu kode warna background button "Search!", itu juga bisa kamu ubah.
Warna kuning itu kode warna border button "Search!", bisa kamu ubah juga.
Dan warna ungu itu kode warna tulisan "Search!", ubah sesuai selera kamu.

Jangan lupa, kode diatas kamu copy dan paste kan di Dashboard > Tata Letak > Add a Gadget > HTML/JavaScript.

Jika kamu masih bingung, tanyakan di kolom shoutbox atau di komentar atau-pun di kolom Ask(sidebar).

Untuk search box ini, kamu gak bisa meletakkan background bergambar ya, hanya bisa kode warna saja. Karna Salsa udah coba, dan hasilnya pun gak bisa ;)

Mau re-post artikel ini? Take with full credit to : Faqihah Husni, oke? Thanks :)

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest