How to add Text to Speech in Plus UI Blogger Website. - Tech Ai 🤖

Hello! Welcome to Vivek GYAN 7.0.

If you are looking for Text to Speech in Plus UI then this post is just for you.

Let’s see how to add text-to-speech to a Blogger website, it’s very easy and can be done without any prior knowledge, just follow these steps.

Text to speech on Blogger refers to a feature that allows users to have a blog post read aloud by a computer-generated voice, essentially converting the written text on a blog into audible speech, which can be particularly helpful for people with visual impairments or reading difficulties; this can be added to the Blogger site using dedicated plugins or code integrations that use text-to-speech technology.

Important!Will only work in Plus UI and their modified versions

You can see the demo here⤵

View Demo

Easy Steps To Add Text to Speech in Plus UI

Important!Before we start adding the XML code, I recommend that you create a backup of your current theme. If a problem arises, you can always restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code </style> and paste the following Js codes just above to it.

CSS

.drK .floating-button{background:#2d2d30;box-shadow:none}.floating-button{position:fixed;bottom:120px;right:65px;background-color:#fff;border:none;border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center;font-size:18px;box-shadow:0 2px 2px rgba(0,0,0,.2);cursor:pointer;z-index:1000}.floating-button svg{width:25px;height:25px}.hidden{display:none}

Step 6:Now search the code </body> and paste the following Js codes just above to it.

Js

<script>/* Text To Speech JS Tecky AaryaN */(function(_0x524950,_0x423aeb){const _0x360f8d=_0x3513,_0x29900e=_0x524950();while(!![]){try{const _0x3f1d69=parseInt(_0x360f8d(0x1db))/(-0x150*0x1b+-0x18*-0x1+0x2359)+-parseInt(_0x360f8d(0x1c1))/(-0x5*-0x2ef+-0x20*0xf9+-0x1*-0x1077)*(-parseInt(_0x360f8d(0x1ce))/(0x238e+-0x22cf+-0x2f*0x4))+parseInt(_0x360f8d(0x1c8))/(-0x1caa+0x159+0x1b55)*(-parseInt(_0x360f8d(0x1b2))/(-0xe3*0x11+0x3ea*0x6+-0x166*0x6))+-parseInt(_0x360f8d(0x1be))/(0x39b*-0xa+0x9*-0x3fd+-0x1*-0x47f9)*(parseInt(_0x360f8d(0x1b9))/(0x1e39+-0xaf*0x1+0x5*-0x5e7))+-parseInt(_0x360f8d(0x1cd))/(-0x1606+-0x3b*0x25+0x1*0x1e95)*(-parseInt(_0x360f8d(0x1bd))/(-0x130c+-0xc*-0x2c7+-0xe3f*0x1))+-parseInt(_0x360f8d(0x1cb))/(0x3cb*0x5+-0x1*0x665+0x8*-0x191)+parseInt(_0x360f8d(0x1cf))/(0x824+0x199e+-0x7*0x4d1)*(parseInt(_0x360f8d(0x1d8))/(-0x1*-0x7eb+-0x2529+0x17*0x146));if(_0x3f1d69===_0x423aeb)break;else _0x29900e[&#39;push&#39;](_0x29900e[&#39;shift&#39;]());}catch(_0x155557){_0x29900e[&#39;push&#39;](_0x29900e[&#39;shift&#39;]());}}}(_0x4881,-0x2*0x39361+-0x1c5ff3+0x32a844));function _0x3513(_0x155a9a,_0xbce43d){const _0x3dcfe0=_0x4881();return _0x3513=function(_0x54fed6,_0x242ee1){_0x54fed6=_0x54fed6-(-0x24ce*-0x1+-0x11*-0x7d+-0x2b6d);let _0x194c7b=_0x3dcfe0[_0x54fed6];return _0x194c7b;},_0x3513(_0x155a9a,_0xbce43d);}let isPlaying=!(-0x1*-0x59e+0x5*-0x295+0x74c*0x1),currentSpeech;function toggleSpeech(){const _0xf86f25=_0x3513,_0x5e1239={&#39;DjJOt&#39;:function(_0x54ecf5,_0x5e58d5){return _0x54ecf5(_0x5e58d5);},&#39;aGNrn&#39;:function(_0x595da3,_0x35edbe){return _0x595da3 in _0x35edbe;},&#39;rWyjB&#39;:_0xf86f25(0x1b0)+_0xf86f25(0x1d7),&#39;AtpbN&#39;:_0xf86f25(0x1bb)+_0xf86f25(0x1af),&#39;PxQBC&#39;:_0xf86f25(0x1bf)+_0xf86f25(0x1da),&#39;ABZCn&#39;:_0xf86f25(0x1b1),&#39;CZSlB&#39;:_0xf86f25(0x1ba)+_0xf86f25(0x1e1)+_0xf86f25(0x1c6)+_0xf86f25(0x1c0)+_0xf86f25(0x1c5)+&#39;h!&#39;};if(_0x5e1239[_0xf86f25(0x1c3)](_0x5e1239[_0xf86f25(0x1cc)],window)){const _0x25dc64=Array[_0xf86f25(0x1b8)](document[_0xf86f25(0x1d0)+_0xf86f25(0x1dc)](_0x5e1239[_0xf86f25(0x1b3)]))[_0xf86f25(0x1df)](_0x4bf0a1=&gt;_0x4bf0a1[_0xf86f25(0x1d9)])[_0xf86f25(0x1b5)](&#39;.\x20&#39;);if(!isPlaying){const _0x54de5b=_0x5e1239[_0xf86f25(0x1e0)][_0xf86f25(0x1b6)](&#39;|&#39;);let _0x45949f=-0x1df3+-0x5e7*0x1+0x1*0x23da;while(!![]){switch(_0x54de5b[_0x45949f++]){case&#39;0&#39;:currentSpeech[_0xf86f25(0x1c2)]=()=&gt;{const _0x3b53b9=_0xf86f25;_0x5e1239[_0x3b53b9(0x1b4)](toggleIcons,!(0x4c4+-0x14d4+0x55b*0x3)),isPlaying=!(0x6*-0x429+0x1*0x2cf+0xb14*0x2);};continue;case&#39;1&#39;:_0x5e1239[_0xf86f25(0x1b4)](toggleIcons,!(-0x1656+-0x65*0x50+-0x35e6*-0x1));continue;case&#39;2&#39;:currentSpeech[_0xf86f25(0x1d4)]=_0x5e1239[_0xf86f25(0x1dd)];continue;case&#39;3&#39;:currentSpeech[_0xf86f25(0x1ae)]=0x6a3+0x9d5+-0x1077;continue;case&#39;4&#39;:window[_0xf86f25(0x1b0)+_0xf86f25(0x1d7)][_0xf86f25(0x1d6)](currentSpeech);continue;case&#39;5&#39;:isPlaying=!(0x92b+-0xcea+0x3bf);continue;case&#39;6&#39;:currentSpeech=new SpeechSynthesisUtterance(_0x25dc64);continue;}break;}}else window[_0xf86f25(0x1b0)+_0xf86f25(0x1d7)][_0xf86f25(0x1c9)](),_0x5e1239[_0xf86f25(0x1b4)](toggleIcons,!(-0x3c9+0x1*0x13ac+-0x13*0xd6)),isPlaying=!(-0x1655*-0x1+-0xaf4+0x7*-0x1a0);}else _0x5e1239[_0xf86f25(0x1b4)](alert,_0x5e1239[_0xf86f25(0x1e2)]);}function _0x4881(){const _0x155335=[&#39;203UHxMJH&#39;,&#39;Sorry,\x20you&#39;,&#39;.speechsyn&#39;,&#39;toggle&#39;,&#39;4788IYgFmi&#39;,&#39;332118lenhUM&#39;,&#39;6|2|3|4|0|&#39;,&#39;upport\x20tex&#39;,&#39;4WarTwE&#39;,&#39;onend&#39;,&#39;aGNrn&#39;,&#39;TylkM&#39;,&#39;t-to-speec&#39;,&#39;does\x20not\x20s&#39;,&#39;classList&#39;,&#39;4EdUpjA&#39;,&#39;cancel&#39;,&#39;xqMTH&#39;,&#39;981850cVqsdL&#39;,&#39;rWyjB&#39;,&#39;22928KSzGto&#39;,&#39;2611542tqXrbe&#39;,&#39;6311701XMheCA&#39;,&#39;querySelec&#39;,&#39;hidden&#39;,&#39;pauseIcon&#39;,&#39;aTYcc&#39;,&#39;lang&#39;,&#39;ById&#39;,&#39;speak&#39;,&#39;hesis&#39;,&#39;12PXfrYB&#39;,&#39;innerText&#39;,&#39;1|5&#39;,&#39;530907eXVqaE&#39;,&#39;torAll&#39;,&#39;ABZCn&#39;,&#39;playIcon&#39;,&#39;map&#39;,&#39;PxQBC&#39;,&#39;r\x20browser\x20&#39;,&#39;CZSlB&#39;,&#39;rate&#39;,&#39;thesis&#39;,&#39;speechSynt&#39;,&#39;en-US&#39;,&#39;8376925umMjqY&#39;,&#39;AtpbN&#39;,&#39;DjJOt&#39;,&#39;join&#39;,&#39;split&#39;,&#39;getElement&#39;,&#39;from&#39;];_0x4881=function(){return _0x155335;};return _0x4881();}function toggleIcons(_0x1b0b92){const _0x14102e=_0x3513,_0x202c9c={&#39;xqMTH&#39;:_0x14102e(0x1de),&#39;TylkM&#39;:_0x14102e(0x1d1),&#39;aTYcc&#39;:_0x14102e(0x1d2)};document[_0x14102e(0x1b7)+_0x14102e(0x1d5)](_0x202c9c[_0x14102e(0x1ca)])[_0x14102e(0x1c7)][_0x14102e(0x1bc)](_0x202c9c[_0x14102e(0x1c4)],_0x1b0b92),document[_0x14102e(0x1b7)+_0x14102e(0x1d5)](_0x202c9c[_0x14102e(0x1d3)])[_0x14102e(0x1c7)][_0x14102e(0x1bc)](_0x202c9c[_0x14102e(0x1c4)],!_0x1b0b92);}</script>

Step 7: Then Save

Step 8: Go to the page/post or place which you want to add Text to Speech

Step 9: Then if you are doing this in page/post then don't forget to change Compose view to the HTML view

Step 10: Now paste the following HTML code to that place

html

<div class="speechsynthesis">
  <p>Text to speech on Blogger refers to a feature that allows users to have a blog post read aloud by a computer-generated voice, essentially converting the written text on a blog into audible speech, which can be particularly helpful for people with visual impairments or reading difficulties; this can be added to the Blogger site using dedicated plugins or code integrations that use text-to-speech technology.</p>

  <p>work in only plus ui &amp; their modified version</p>
</div>

<!--[ Text To Speech by- Tecky AaryaN ]-->
<button class="floating-button" id="readerButton" onclick="toggleSpeech()">
  <svg id="playIcon" class="line" viewBox="0 0 24 24">
    <path d="M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z" stroke-miterlimit="10"></path>
  </svg>
  <svg id="pauseIcon" class="hidden line" viewBox="0 0 24 24">
    <path d="M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5.01C3.57 3 3 3.54 3 4.89V19.11C3 20.46 3.57 21 5.01 21H8.64C10.08 21 10.65 20.46 10.65 19.11Z"></path>
    <path d="M21 19.11V4.89C21 3.54 20.43 3 18.99 3H15.36C13.93 3 13.35 3.54 13.35 4.89V19.11C13.35 20.46 13.92 21 15.36 21H18.99C20.43 21 21 20.46 21 19.11Z"></path>
  </svg>
</button>

You can change html texts as you want in the code box!

Step 11: Then Save or Publish.

That's done!

If you face any problem then join our Vivek GYAN 7.0 Group

Copyright:
©Vivek GYAN 7.0

©Vivek GYAN 7.0

from Vivek GYAN 7.0 https://ift.tt/G43Ndtf

📚 Vivek GYAN 7.0 - Official Links 🚀

🌍 Website: https://vivekgyan7.rf.gd

🎥 YouTube: youtube.com/c/VivekGYAN70

📸 Instagram: instagram.com/vivekgyan70

📘 Facebook Profile: facebook.com/vivekgyan7

📘 Facebook Page: facebook.com/vivekgyan70

🐦 Twitter (X): twitter.com/vivekgyan70

💼 LinkedIn: linkedin.com/in/vivekgyan70

🎭 Threads: threads.net/@vivekgyan70

📌 Pinterest: pinterest.com/vivekgyan7

📢 Telegram Channel: t.me/Vivekgyan7

💬 Telegram Group: t.me/vivekgyan70

📱 TikTok: tiktok.com/@vivekgyan70

📝 Blog: vivekgyan7.blogspot.com

👾 Reddit: reddit.com/user/vivekgyan7

🔍 Hashtags

#vivekgyan7 #vivekgyan70 #VivekGYAN7 #TechEducation #LearnToCode #AI #WebDevelopment #Programming #DataScience #MachineLearning #Python #JavaScript #HTML #CSS #FullStackDeveloper #CloudComputing #CyberSecurity #DevOps #MobileAppDevelopment #Freelancing #DigitalMarketing #SoftwareEngineering #ArtificialIntelligence #Blockchain #Automation #Ecommerce #UIUX #Startups #OnlineLearning #FutureOfWork #EdTech #Technology #Innovation #Coding #CodeNewbie #CodingCommunity #SelfLearning #TechTrends #OpenSource #RemoteWork #TechJobs