Home Blogger Tutorial CARA MEMBUAT KOTAK PENCARIAN SEPERTI KASKUS DENGAN FITUR VOICE DI BLOG

CARA MEMBUAT KOTAK PENCARIAN SEPERTI KASKUS DENGAN FITUR VOICE DI BLOG

CARA MEMBUAT KOTAK PENCARIAN SEPERTI KASKUS DENGAN FITUR VOICE DI BLOG

Kali ini saya akan membagikan artikel tentang cara membuat kotak pencarian dengan fitur voice ala kaskus, pasti anda tahu apa itu kaskus, kaskus merupakan situs komunitas terbesar di indonesia, nah pencarian ala kaskus ini memiliki fitu voice untuk memudahkan anda dalam mencari hanya tinggal berbicara saja sudah bisa mencari, Penasaran ingin memasangnya ? langsung saja cekidot....

Login dulu di Blogger
Masuk di Tata Letak > Add Widget > Html / Javascript
Copy code ini

<style>
#search {
box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
background: rgba(255,255,255,0.3);
display: inline-block;
border-radius: 3px;
position: relative;
padding: 10px;
margin: 10px;
z-index: 1;
}
#searchform {
text-align:center;
}
#search input[type="text"] {
padding: 10px 100px 10px 10px;
border: 1px solid #aaa;
border-radius: 3px;
font-size: 16px;
color: #484848;
height: 18px;
width: 450px;
outline:none;
}
#search input[type="submit"] {
background-color: #ffc61a;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFC61A', endColorstr='#FFFFB31A');
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffc61a), color-stop(100%, #ffb31a));
background-image: -webkit-linear-gradient(top, #ffc61a 0%,#ffb31a 100%);
background-image: -moz-linear-gradient(top, #ffc61a 0%,#ffb31a 100%);
background-image: -o-linear-gradient(top, #ffc61a 0%,#ffb31a 100%);
background-image: linear-gradient(top, #ffc61a 0%,#ffb31a 100%);
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
border-radius: 0 3px 3px 0;
color: rgba(0,0,0,0.6);
font-weight: bold;
font-size: 16px;
padding: 10px;
width: 90px;
top: 11px;
right: 11px;
bottom: 11px;
position: absolute;
cursor: pointer;
outline:none;
border: 0;
margin: 0;
}
#search input[type=submit]:hover,
#search input[type=submit]:focus {
background: #ff9500;
}
</style>

<script type="text/javascript">
function startSearch(event){document.getElementById('searchform').submit();}
</script>

<form action="/search" id="searchform" method="get">
<div id="search">
<input lang="id" name="q" onwebkitspeechchange="startSearch()" placeholder="Temukan informasi apapun yang ingin ente cari disini" type="text" x-webkit-speech="" x-webkit-grammar="builtin:search" />
<input type="submit" value="Search" />
</div>
</form>

Lalu Simpan

Demo :

Bagaimana mudah bukan memasang widget nya semoga bermanfaat , dan selamat mencoba. Dapatkan tips blogger lainnya di Ilmu gratis indonesia

Related Post

0 Comment "CARA MEMBUAT KOTAK PENCARIAN SEPERTI KASKUS DENGAN FITUR VOICE DI BLOG"

Post a Comment

Subscribe to: Post Comments (Atom)