Cara Menambahkan Fitur Search By Voice Pada Blogger

Tutorial kali ini merupakan kelanjutan dari tutor membuat search box full screen pada postingan sebelumnya. Mengapa gitu ? Yaa karna fitur search by voice ini dibuat untuk melengkapi fitur search box fullscreen pada kotak penelusuran template blog kamu.

Jadi apabila template kamu sebelumnya tidak menggunakan Search Box Full Screen jadi saya sarankan Baca Juga : Cara Membuat Search Box Full Screen Pada Blogger. Sebenarnya jika kamu tidak ingin mengganti search box milikmu, kamu juga tetap bisa menambahkan fitur Search By Voice, tapi kamu harus melakukan penyesuain terlebih dahulu terhadap CSSnya agar posisi fitur search boxnya berada pada posisi yang tepat.

Oke langsung saja kita ke tutorial bagaimana cara menambahkan Fitur Search By Voice pada kotak penelusuran (Search Box) template kamu. Untuk hasil DEMOnya kamu dapat melihat di search box blog ini ditampilan desktop, bukan ditampilan Mobile karna fitur pencariannya berbeda :v.

Cara Menambahkan Fitur Search By Voice Pada Blogger

Nah disini saya anggap kamu sudah masuk ke Teks Editor Blog kamu.

1. Pertama, copy kode CSS dibawah ini dan letakkan 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;}

2. Setelah itu, copy kode Javascript dibawah ini dan letakkan tepat diatas kode </body>,

 <script type="text/javascript">
 //<![CDATA[
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>

3. Kemudian, cari kode seperti ini <div id='searchfs'>, Kemudian hapus sampai kode penutup </div>, misalkan seperti ini,

<!-- HAPUS DARI SINI BRO --> <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> <!-- SAMPAI DISINI AJA BRO -->

Ganti Dengan Yang 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>

Lihat kode yang saya beri Hightlighter, itu adalah perubahan kode dari yang sebelumnya atau penambahan kode untuk memanggil Fungsi Search By Voice Dan Icon MIC. Jadi sebernarnya tidak perlu menghapus semuanya, karna hanya perlu menambahkan beberapa kode tersebut saja, jadi agar lebih cepat saya bilang hapus saja,

5. Terakhir simpan atau save template tersebut.

Sekian tutorial bagaimana cara menambahkan fitur search by voice pada blogger yang dapat saya bagikan, jika ada yang tidak dapat kamu mengerti silahkan berkomentar dibawah, dan semoga dengan adanya artikel ini dapat memperindah tampilan blog kamu, Semoga bermanfaat :D