How to add text size changer wedget in Blogger

Hello Guys! How are you? I hope you are all good. Welcome Freemium Tech website's today's article. Today we will share with you how to add text size changer wedget on Blogger website blog.

What will be doing today?

We explain to you how to add a tool to change the size of the text in the Blogger blog so that people with disabilities can control the enlargement or reduction of the text on your blog.

What is the text resizing tool?

Text Resizer allows people with disabilities to make the text on a website bigger or smaller, without losing any of the information on the page. This will help websites follow the WCAG 2.0 AA 1.4.4 directive, which states that text must be able to resize up to 200% of its original size. The advantage of the text resizing tool.

Text dimension settings can generally be set.
In most cases, the text size does not need to be adjusted all at once.
Content may flow normally when viewed after limited resizing.

How to add the tool to add the Text Resizer functionality to your blogger blog?

You have to follow the following steps.

Important!
Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can 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 </body> and Paste the following Codes just above to it.

<b:if cond='data:view.isPost'>

<div class='Tresizerts'>

<div id='Ifont'>A+</div>

<div id='Dfont'>A-</div>

</div>

</b:if>

<style>

  /* Text Resizer CSS by FreemiumTech */

.Tresizerts{position:fixed;right:25px;bottom:150px;background:#ffffff;box-shadow:0 0 5px #000000;border-radius:5px;box-sizing:border-box;z-index:1;transition:all .3s linear}

.darkMode .Tresizerts{background:var(--darkU);color:#ffffff;box-shadow:0 0 5px #ffffff}

#Ifont,#Dfont{font-size:18px;padding:10px;box-sizing:border-box;background:#ffffff;color:#000000}

.darkMode #Ifont,.darkMode #Dfont{background:var(--themeC);color:#ffffff;border-color:#ffffff} 

#Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000000} 

#Dfont{border-top:.5px solid #000000} #Dfont{border-radius:0 0 5px 5px} 

#Ifont:hover,#Dfont:hover{background:var(--themeC);color:var(--darkU);}

</style>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>

<script>/*<![CDATA[*/ 

$("").ready(function(){$("#Ifont").click(function(){curSize=parseInt($(".postBody").css("font-size"))+1,curSize<=20&&$(".postBody").css("font-size",curSize)}),$("#Dfont").click(function(){curSize=parseInt($(".postBody").css("font-size"))-1,curSize>=10&&$(".postBody").css("font-size",curSize)})});

/*]]>*/</script>

Step 10: Then Save the template.

That's done!!

Before Add this let's see a preview

Demo

CONCLUSION

In this article, I shared with you How to add text size changer wedget in Blogger Blog? I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.