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

Post a Comment

Previous Post Next Post