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

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.


  4. /* 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}


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


  6. <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>


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


  8. <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