TUTORIAL: Search Box/ Kotak Search Macam Saya

Wednesday, November 02, 2016



ASSALAMUALAIKUM | SALAM SEJAHTERA

Tutorial kali ni adalah tutorial untuk buat kotak search macam dalam gambar di atas. Direquest oleh the beautiful Kak Mai. Sorry Kak sebab sy buat lambat. Hehee. Majoriti tutorial dlm blog ni org request. Kalau tak request jarang aku buat melainkan kalau aku rajin hahahaa. Aku share apa aku tahu je. Sebab aku ni takde lah semua benda aku tahu. Kahkahh

Kalau nak buat, korang boleh ikut tutorial ni okay.

Pergi kat Layout. Kemudian klik kat Add Gadget. Klik yang dekat bahagian sidebar tau. Sebab nak letak kat sidebar kan? Selalu mmg org letak kotak search kat sidebar. Then klik HTML/Javascript. Copy kod di bawah dan paste dalam HTML/Javascript tu.

<center>
<form action="/search" id="searchThis" method="get" style="display: inline;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background:#FFFFE5; border-bottom-left-radius: 10px 10px;border-top-left-radius: 10px 10px;border: #AAC7E3 solid 3px;color: #666666; font-size: 11px;font-family:century gothic; width:135px;padding:3px;padding-left:5px; " type="text" value="Enter some keyword" vinput="" /> <input id="searchButton" style="background:#F1EDD0;border-bottom-right-radius: 10px 10px;border-top-right-radius: 10px 10px; border: #AAC7E3 solid 3px;color: #444444; font-size: 11px;font-family:century gothic;padding:2px;width:50px;" type="submit" value="Search" /></form>
</center>

Kat atas ni kod aku. So kalau korang guna dan tak tukar kod warna, korang dapatlah warna sebijik mcm aku punya. Hahahaha. Tutorial kotak search ni aku tak ingat aku rujuk kat mana. So koding kredit to the owner.

KOD WARNA BACKGROUND
KOD WARNA BORDER
KOD WARNA TULISAN
AYAT DALAM KOTAK SEARCH
WIDTH KOTAK SEARCH

Kod warna korang boleh rujuk kat SINI
Korang boleh tambah kod <br> untuk jarakkan kotak search ni. Boleh letak di awal atau di akhir kod kat atas. Korang boleh guna <br> untuk wujudkan ruang sbb tu kod untuk ruang. Faham tak? Hahahaa. Nak letak kat mana2 pun boleh. Sebelum cbox ke selepas cbox ke. Selalu aku letak kalau 'benda' kat atas dia terlalu 'rapat' jadi aku letakkan kod <br> ni. Harap ayat aku tak macam puting beliung hahahaa.

Kalau korang ada nak request tutorial, cakap je kat ruang komen okay. Cbox kdg2 takut aku terlepas pandang. Tataaa!

Share This Story

Tags:

You Might Also Like

5 COMMENT

  1. Noor Maizan2 November 2016 at 17:56

    wah thanks a lot Rrai, Mai gunaaaa tau, cantik, suka sgt yg mcm ni! Lagi satu, baru tahu pasal fungsi
    , thank you~!!

    ReplyDelete
  2. Unni anje2 November 2016 at 20:42

    comel2.. boleh tukar kaler pink kan..

    ReplyDelete
  3. Nur Syafiqah23 September 2017 at 22:17

    Hi, saya ambil tuto ni yee

    ReplyDelete

Penghantaran sebarang komen, permintaan, cadangan ATAU komunikasi lain yg lucah, sumbang, palsu, mengancam ATAU negatif dengan niat untuk menyakiti hati, menganiayai, mengugut ATAU mengganggu orang lain dengan ATAU tanpa mendedahkan identitinya adalah suatu kesalahan boleh didenda tidak melebihi 58 ribu ringgit atau dipenjarakan selama tempoh tidak melebihi 1 tahun ATAU kedua-duanya sekali.