×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

Cara Membuat Fitur Pencarian Menggunakan Suara Pada Blog

Faronesia.com - Halo sahabat blogger dimanapun anda berada, seperti biasa, kali ini kita akan membahas dan praktik Cara Membuat Search by Voice atau lebih sering dikenal dengan istilah pencarian Menggunakan Suara pada blog.

Fitur Search by Voice sangat membantu sekali dalam proses pencarian artikel jika pengguna tidak ingin mencari menggunakan metode ketik. Namun, fitur Search by Voice juga belum banyak di gunakan oleh kalangan blogger dikarenakan banyaknya faktor seperti, tidak berminat memasang fitur Search by Voice atau susah dalam mengaplikasikannya terlebih untuk blogger pemula.

Mungkin diantara beberapa pembaca sudah tak lazim dengan Tutorial pemasangan fitur Search by Voice yang dapat anda temukan di beberapa blogger namun di FARONESIA Tutorial pemasangan fitur Search By Voice ini sudah saya optimalkan dan tutorial ini juga sengaja saya persingkat agar lebih mudah dalam mengaplikasikannya terlebih untuk blogger pemula sekalipun, anda hanya mencopy lalu memastekan ke bagian- bagian yang telah saya perintahkan.

Fitur Search by Voice yang ada pada tutorial ini telah diuji sebelumnya pada beberapa versi yaitu template Vi*magz besutan Mas Sugeng (versi 2.6 hingga versi terbaru) dan hasilnya work 100%.

Disini saya tidak menyertakan demo karena tutorial yang dimaksud pada postingan kali ini juga telah saya terapkan pada blog faronesia.com, anda bisa melihatnya dengan cara pergi ke menu pencarian.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat pencarian menggunakan suara pada blog atau Search by voice

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode <div id='searchfs'> hingga </div> penutup lalu ganti dengan kode dibawah ini
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <b:switch var='data:blog.locale'><b:case value='id'/>
     <input aria-label='caribicara' id='caribicara' name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input aria-label='caribicara' id='caribicara' name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
<input name='max-results' type='hidden' value='8'/>
  </form>
   <label class='cari' id='bicara' onclick='bicara()'><svg viewBox='0 0 24 24'>
<path d='M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z' fill='#e3389c' id='micwarna'/>
<path d='M19,11C19,12.19 18.66,13.3 18.1,14.28L16.87,13.05C17.14,12.43 17.3,11.74 17.3,11H19M15,11.16L9,5.18V5A3,3 0 0,1 12,2A3,3 0 0,1 15,5V11L15,11.16M4.27,3L21,19.73L19.73,21L15.54,16.81C14.77,17.27 13.91,17.58 13,17.72V21H11V17.72C7.72,17.23 5,14.41 5,11H6.7C6.7,14 9.24,16.1 12,16.1C12.81,16.1 13.6,15.91 14.31,15.58L12.65,13.92L12,14A3,3 0 0,1 9,11V10.28L3,4.27L4.27,3Z' fill='#676767' id='micoff'/>
</svg><span id='sprec'/></label>
<p id='cariinfo'/>
</div>
  • selanjutnya memasang kode css dari kode diatas. silahkan cari kode ]]></b:skin> lalu tempelkan kode css dibawah ini tepat diatas kode ]]></b:skin>
/* SEARCH BY VOICE */
#searchfs > label.cari > span#sprec {
pointer-events: none;
transition: transform 0.3s ease-in-out 0.3s;
transform: scale(0);
color: #676767;
position: absolute;
top: -34%;
left: -30%;
word-wrap: break-word;
margin: 0 auto;
height: 95px;
width: 95px;
z-index: -50;
text-align: center;
border-radius: 90px;
background: #ff28a552;
}
#searchfs > label.cari{
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: all .5s linear;
color: #676767;
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
position: relative;top: 55%;
word-wrap: break-word;
margin: 0 auto;
width: 43px;
text-align: center;
border-radius: 90px;
background: #fcfcfc;
}
label.cari svg {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: -5px;
background-repeat: no-repeat!important;
content: '';
}
#micoff {
display: none;
}
#searchfs > p#cariinfo{
margin-top: 0.5rem;
position: relative;
top: 60%;
word-wrap: break-word;
margin: 0 auto;
width: 80%;
text-align: center;
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
color:#ffffff;
}
  • langkah terakhir, salin kode js dibawah ini lalu letakkan dibawah kode </body>
<script type="text/javascript">
//<![CDATA[ // Search By Voice create by Mediaachmad | Speech Recognition var idkotaksearch = "caribicara"; // Ganti dengan ID input search / Kotak Pencarian. var idformsearch = "search-form"; // Silakan kalian ganti dengan ID Form Search Kalian Contoh : <form id="idform" ... /> var bahasa = "id"; // Ganti Code bahasa sesuai keingan kalian 'ID' merupakan code bahasa indonesia var wmcari = "Mendengarkan..."; // Watermark atau Placeholder input form var warnarec = "#e3389c"; // warna icon mic eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1 s=[\'R=\',\'S=\',\'T\',\'U=\',\'V\',\'W==\',\'X=\',\'Y\',\'Z==\',\'10==\',\'11=\',\'12==\',\'13=\',\'14=\',\'15==\',\'16\',\'17==\',\'18==\',\'19=\',\'1a\',\'1b\',\'1c=\',\'1d=\',\'1e=\',\'1f==\',\'1g==\',\'1h=\',\'1i=\'];(2(b,c){1 d=2(a){1j(--a){b[\'1k\'](b[\'1l\']())}};d(++c)}(s,1m));1 0=2(g,h){g=g-3;1 i=s[g];8(0[\'F\']===G){(2(){1 d;1n{1 e=1o(\'k\\l(2()\\l\'+\'{}.1p(\\1q\\1r\\1s)(\\l)\'+\');\');d=e()}1t(1u){d=t}1 f=\'1v+/=\';d[\'u\']||(d[\'u\']=2(a){1 b=H(a)[\'1w\'](/=+$/,\'\');I(1 c=3,m,5,J=3,v=\'\';5=b[\'1x\'](J++);~5&&(m=c%9?m*1y+5:5,c++%9)?v+=H[\'1z\'](1A&m>>(-w*c&K)):3){5=f[\'1B\'](5)}k v})}());0[\'L\']=2(a){1 b=u(a);1 c=[];I(1 d=3,M=b[\'1C\'];d<M;d++){c+=\'%\'+(\'1D\'+b[\'1E\'](d)[\'1F\'](x))[\'1G\'](-w)}k 1H(c)};0[\'y\']={};0[\'F\']=!![]}1 j=0[\'y\'][g];8(j===G){i=0[\'L\'](i);0[\'y\'][g]=i}z{i=j}k i};1 A=t[\'A\']||t[0(\'3\')];1 n=6[0(\'7\')](1I);1 o=6[0(\'7\')](0(\'w\'))[\'1J\'];1 p=6[0(\'7\')](0(\'1K\'))[0(\'9\')];1 B=6[0(\'7\')](\'B\')[0(\'9\')];1 q=6[\'1L\'](\'q\');8(A){q[0(\'1M\')]=\'1N\\1O\\1P\\1Q\\1R\\1S\';2 1T(){1 d=1U 1V();d[0(\'K\')]=1W;d[0(\'1X\')]=!![];d[0(\'1Y\')]=7;1 e=\'\';1 f=\'\';1 g=\'\';1 h=\'\';d[\'1Z\']=2(){n[\'20\']=21;o[0(\'N\')]=\'#O\';p[0(\'C\')]=P};d[0(\'22\')]=2(){o[0(\'N\')]=P;p[0(\'C\')]=0(\'23\');n[0(\'24\')]=\'25\\26\\27...\\28\\29\'};d[0(\'2a\')]=2(a){8(D[0(\'E\')][0(\'x\')]>3){r=D[0(\'E\')][D[0(\'E\')][0(\'x\')]-7];1 b=r[3][0(\'2b\')];1 c=r[3][0(\'2c\')];8(r[\'2d\']){e+=c;g+=b;n[0(\'2e\')]=g;6[\'2f\'][2g][0(\'2h\')]()}z{f=c;h+=b}}6[0(\'7\')](\'2i\')[0(\'9\')][0(\'2j\')]=0(\'2k\')+f+\'\\l+\\2l.4))\'};d[0(\'2m\')]()}}z{q[\'2n\']=0(\'2o\');p[0(\'C\')]=\'#O\';o[0(\'Q\')]=0(\'2p\');B[0(\'Q\')]=0(\'2q\')}',62,151,'_0x36a6|var|function|0x0||_0x4ca71a|document|0x1|if|0x4|||||||||||return|x20|_0x39e3c5|caribicara|micwarna|bicarabg|cariinfo|sonuc|_0x5f2f|window|atob|_0xb8e9e4|0x2|0x10|MjiZZe|else|SpeechRecognition|micoff|0xa|event|0xf|BhowAJ|undefined|String|for|_0x2cd0b2|0x6|xgGbNK|_0x2b01d2|0x9|ffffff|warnarec|0x19|Z2V0RWxlbWVudEJ5SWQ|bWljd2FybmE|YmljYXJh|c3R5bGU|aW5uZXJIVE1M|bGFuZw|aW50ZXJpbVJlc3VsdHM|bWF4QWx0ZXJuYXRpdmVz|ZmlsbA|YmFja2dyb3VuZA|b25lbmQ|I2ZmZmZmZg|cGxhY2Vob2xkZXI|b25yZXN1bHQ|cmVzdWx0cw|bGVuZ3Ro|dHJhbnNjcmlwdA|Y29uZmlkZW5jZQ|dmFsdWU|c3VibWl0|dHJhbnNmb3Jt|c2NhbGUoY2FsYyg|c3RhcnQ|QnJvd3NlciBBbmRhIFRpZGFrIG1lbmR1a3VuZyBTZWFyY2ggYnkgVm9pY2U|ZGlzcGxheQ|bm9uZQ|YmxvY2s|d2Via2l0U3BlZWNoUmVjb2duaXRpb24|while|push|shift|0x16b|try|Function|constructor|x22return|x20this|x22|catch|_0x5a2707|ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789|replace|charAt|0x40|fromCharCode|0xff|indexOf|length|00|charCodeAt|toString|slice|decodeURIComponent|idkotaksearch|style|0x3|getElementById|0x5|Browser|x20Anda|x20mendukung|x20Search|x20by|x20Voice|bicara|new|webkitSpeechRecognition|bahasa|0x7|0x8|onsoundstart|placeholder|wmcari|0xb|0xc|0xd|Suara|x20tidak|x20jelas|x20Coba|x20Lagi|0xe|0x11|0x12|isFinal|0x13|forms|idformsearch|0x14|sprec|0x15|0x16|x200|0x17|innerHTML|0x18|0x1a|0x1b'.split('|'),0,{})) //]]>
</script>
  • Simpan template, dan lihat hasilnya

Request artikel? Silahkan masuk ke halaman Tanggapan

Demikianlah mengenai Cara Membuat Pencarian Menggunakan Suara atau Search by Voice Pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.
Buka komentar
Tutup komentar
  1. Buat khusus disabl dong kak.. kecuali ketik

    BalasHapus
  2. Wahh ternyata bisa jg ya membuat fitur pencarian menggunakan suara, hebat saya baru tau hehe, thanks ya gan (y/

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup