How to install google voice on your blog to be more cool
Blogging Design
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
- Please login to blogger, and enter the dashboard.
- Enter the menu Theme, then click EDIT HTML.
- Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.
- Now add the following JS script just avobe </body> code
- Install the Html code, here you adjust, but good advice is placed above or below the post title (You can see here the tutorial)
/* 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}<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><span class='btnvoice'>
<button class='voice-button' onclick='responsiveVoice.speak(document.querySelector('.post-body').textContent, 'Indonesian Female');' 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>