How to install google voice on your blog to be more cool

How to install google voice on your blog to be more cool - google voice: is one of the features of google that makes it easy for visitors to search, read the web with sound, this time I Netralid.com admin will share the tutorial, ok just see:

Live Demo

1. Please login to blogger, and enter the dashboard.
2. Enter the menu Theme, then click EDIT HTML.
3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.




/* google voice */
.btnvoice{margin:0;overflow:hidden;position:relative}
.btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}
.btnvoice button.voice-button{color:#555;border:none;border-radius:0}
.btnvoice button.voice-stop{color:#ff5f02;border:none;border-radius:0}




4. Now add the following JS script just avobe </body> code




<script>
//<![CDATA[
/* option font voice js*/
function loadCSS(e,t,o){"use strict";var i=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet",i.href=e,i.media="only x",s.parentNode.insertBefore(i,s),setTimeout(function(){i.media=o||"all"})}loadCSS("https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"),loadCSS("https://fonts.googleapis.com/css?family=Anton|Roboto:300,300i,400,400i,500,500i,700"),"undefined"==typeof jQuery&&document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"><\/script>'),"undefined"==typeof jQuery&&document.write('<script src="https://code.responsivevoice.org/responsivevoice.js?key=IpsVaOl2"><\/script>');
//]]>
</script>




5. Install the Html code, here you adjust, but good advice is placed above or below the post title (You can see here the tutorial)




<span class='btnvoice'>
<button class='voice-button' onclick='responsiveVoice.speak(document.querySelector(&#39;.post-body&#39;).textContent, &#39;Indonesian Female&#39;);' title='Play'><i aria-hidden='true' class='fa fa-play-circle'></i> Voice</button>
<button class='voice-stop' onclick='responsiveVoice.cancel();' title='Stop'><i aria-hidden='true' class='fa fa-stop-circle'></i></button>
</span>

Live Demo