Cara Membuat Voice Search di Blogger Dengan Mudah

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Voice Search di Blogger dengan mudah, Untuk menambah Voice search di blogger ini hanya menambahkan beberapa kode saja, maksud dari Voice Search adalah cara pencarian dengan menggunakan suara.


Fitur ini sama halnya seperti fitur ok Google yang dengan menggunakan suara itu, dan fitur ini sudah dilengkapi dengan bahasa Indonesia jadi bagi kamu yang memiliki blog bahasa Indonesia kamu bisa menggunakan fitur ini. Fitur ini memiliki kekurangan karena menggunakan Web API Speech Recognition.

Cara Membuat Voice Search di Blogger Dengan Mudah

1. Silahkan kamu login ke blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya silahkan kamu copy dan paste kode dibawah ini tepat didalam properti <div id='searchfs'> untuk contohnya seperti dibawah ini untuk pengguna Viomagz, tapi kalau kamu pengguna lain silahkan cari di searchnya.

id='caribicara' aria-label='caribicara'

4. Untuk kode sebelumnya 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 name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
</div>

5. Kalau sudah kamu paste kodenya bakal seperti 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>
</div>

6. Selanjutnya kita akan memasang kode mic-nya, cari kode <div id='searchfs'> dan copy kode dibawah ini untuk pengguna Viomagz, apabila kamu pengguna template lain silahkan di sesuaikan sendiri.

<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'/>

7. Pastekan kode diatas tepat DIATAS kode </div> penutup div diatas tadi contohnya seperti 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>

8. Selanjutnya kita tambahkan kode CSS dibawah ini tepat DIATAS kode ]]></b:skin> atau kode </style>

#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;}

9. Selanjutnya silahkan tambahkan kode Javascript dibawah ini tepat DIATAS kode </body> Ingat javascript dibawah ini tidak menurunkan skor kecepatan blog anda.

<script type="text/javascript">
 //<![CDATA[
// Search By Voice create by Jagoandzgn | 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>

10. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Voice Search di Blogger dengan mudah, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    Belum ada Komentar

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel