H
allo sobat
AHS,, gimana nih kabarnya di waktu-waktu puasa seperti ini?? :3 pastinya masih sehat kan??
nih sobat sekarang ada yang baru dari blog ini,,..
kali ini saya ingin membagikan tutorial mengenai
Cara Membuat Simple Search Box Dengan Gambar
pastinya anda bosen kan dengan tampilan lama dari Google Custom Search yang memang seperti itu aja xD...
nah sekarang saya akan bagikan tutorial ini..
yuk mari disimak sobat,..
Cara Membuat Simple Search Box Dengan Gambar Di Kiri Dan Kanan
- pertama,pastilah login ke blogger terlebih dahulu
- setelah itu menuju edit html/Template
- nah,,setelah itu copy kan kode dibawah ini disembarang tempat,yang penting tidak error
<div style='float:right;padding:0 6px;margin-bottom:-3px;margin-right:-3px;overflow:hidden'>
<div style='float:right;padding:4px 2px 1px 0;'><form action='/search' id='cse-search-box' method='get' target='_blank'><div>
<input class='searchfield' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here...'/>
<input alt='search' class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCogIIrMQZcMX1FGIxjORYymAF9kLFffgKzLuK99l_houNcvB1RGWToUmkImA5QmTpG_f3skMUpRxOCuOzwyYmo-W4lrOJKdSCoEsjDHxgfF3Tyewg65QShOp1ryW0KuehPxBlxQIeJp8/s1600/button-search.png' title='Search!' type='image'/></div></form></div><div class='logosearch'><img alt='Google' height='28' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RQj1P-rwLlKmZh75hOmEipEopubizwu9A6D96qMx3AsZLbeUhi3QHTmpPgMA6gaGmIJqlUd7f7AE4LfqGyfPBuSosxyixu0_YC4c550X38he8ttJqEbVT91EV7SRrkRu5LIFOo4NsVw/s1600/google-search.png' title='Google Search' width='50'/></div></div>
Belum Selesai Bero :3
- nah,kalau sudah,,silahkan cari kode ]]></b:skin> gunakan tombol Ctrl+F agar cepat
- kemudian,copy kode dibawah ini,pastekan diatasnya kode
]]></b:skin>
.searchfield{width:150px;font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;color:#555}
.logosearch{background:none;height:28px;width:50px;float:right;padding:3px 6px 0 0;}
.searchbutton{border:none;margin:0;padding:0;height:21px;width:50px;cursor:pointer;vertical-align:top}
Untuk Setting
| Kode Search Engine | Cara Setting |
|---|
| .searchfield{width:150px;font:normal 11px Tahoma | Ganti Itu width/panjang kotak search box anda |
| id='cse-search-box' | Jangan lupa sobat,masukkan id google custom search anda ke situ,bila tidak search engine hanya berfungsi untuk menyaring artikel saja |
| src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCogIIrMQZcMX1FGIxjORYymAF9kLFffgKzLuK99l_houNcvB1RGWToUmkImA5QmTpG_f3skMUpRxOCuOzwyYmo-W4lrOJKdSCoEsjDHxgfF3Tyewg65QShOp1ryW0KuehPxBlxQIeJp8/s1600/button-search.png' | Untuk ini,,silahkan ganti menjadi gambar anda sendiri |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RQj1P-rwLlKmZh75hOmEipEopubizwu9A6D96qMx3AsZLbeUhi3QHTmpPgMA6gaGmIJqlUd7f7AE4LfqGyfPBuSosxyixu0_YC4c550X38he8ttJqEbVT91EV7SRrkRu5LIFOo4NsVw/s1600/google-search.png | Untuk ini juga lakukan hal yang sama |
Untuk hal-hal yang lain saya kira anda sudah mengerti,oke,bila anda yang perlu ditanyakan silahkan komentar saja..
Oke,sampai disini dulu ya sobat AHS,,..bye..
Sumber dan Gambar By :
Kompiajaib.com