Free Online Tools And Generator

Mywapmaster


☰ subc


memasang search form tanpa tombol

search form xtgem, cara membuat searchbox google

Cara membuat Search form tanpa tombol di wapsite ini menggunakan pencarian Google Site, jadi jika kata kunci yang masukan tiada dalam situs kita maka hasilnya kosong, jadi cara ini cukup akurat agar kita dapat memantau kata artikel kita sudah diterima Google apa belum.

Buat pengguna xtgem jika Site Anda hanya menampilkan artikel blog saya rasa Search form ini tidak perlu dipasang karena sudah ada Search form di dalamnya, berbeda Wap yang banyak Link berantai didalamnya seperti mywapmaster ini, fungsi ini sangat penting di pasang.
Oh ya, saya berencana akan mengganti Search form ini, untuk itu saya akan membagikan disini, selain untuk bersama mungkin suatu saat saya akan menggunakan nya lagi sudah ada arsip disini.

searchbox.jpg
Tampilan searchbox versi touch

Sesuai judul searchbox ini tidak menggunakan tombol, buat pengguna Android keyboard pada ponsel Anda akan otomatis berubah menjadi tombol pencarian, yang lain dapat menekan enter, tanpa script jadi tidak pengaruh pada loading, berikut kode yang di gunakan :

<style>
#searchbox { text-align:center;}
input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; 
}

/* search input */
input[type=search] {
	background: #ededed url(http://ykub.xtgem.com/Home/images/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 32px;
	width: 70px;
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px;
	background-color: #fff;
	border-color: #6dcff6;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* placeholder */
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}
</style>



√ Letakkan Css diatas pada header, jika dimasukkan pada Css yang ada hapus <style> dan </style>

<form action="http://www.google.com/search" method="get" id="searchbox">                                                                                                                                                                                                                                             <input type="hidden" name="sitesearch" 
value="ykub.xtgem.com" />                                                                                                       <input type="search" id="s"
name="q" placeholder="search">
                </form>



√ Letakkan kode Html diatas dimana yang Anda inginkan.
Search form diatas dapat dipasang selain xtgem.



memasang search form tanpa tombol Rated 4.5/5 based on 144 reviews
Diposkan pada 18-05-2016 22:44
Tags: css , html , script , xtgem
inka
04-02-2017 23:59

Makasih ****** .ilmunya semoga berekah

pauji
02-07-2016 20:51

http://narusenju.*****.in

Hilmi-Kun
19-05-2016 21:18

coba dulu dah min.
Makasih min udah pakek textarea jadi mudah buat copas nih..

RifkyUchiha
19-05-2016 10:17

Mantap

Please login in order to post comments: Login | Signup


Close ×

Info

Note :

Do Not Copy Code Using Translator.
( Jangan Copy Code Menggunakan Translator Bahasa)

Please Like This Page

Terima Kasih