Home
Blogger Tutorials

How to Add a Text Resizer Tool in Blogger (Improve Accessibility & UX)

Techno Praveen

In today’s guide, you will learn how to add a Text Resizer tool to your Blogger website. This accessibility feature allows visitors to increase or decrease the font size without losing any content on the page. It is especially useful for visually impaired users and helps your website follow the WCAG 2.0 AA 1.4.4 accessibility guideline, which requires text to be scalable up to 200% of its original size.

How to Add a Text Resizer Tool in Blogger (Improve Accessibility & UX)
How to Add a Text Resizer Tool in Blogger | Techno Praveen

What Is the Text Resizer Tool?

The Text Resizer tool allows users to adjust the font size on your website—making it larger or smaller based on their preference. This improves accessibility, readability, and user experience for all visitors.

Benefits of Using a Text Resizer

  • Users can freely control the text size.
  • Once changed, the text size remains consistent during the session.
  • Content adjusts naturally when resized.

How to Add the Tool to Blogger

Follow the steps below to install the Text Resizer tool on your Blogger site:

Note:
Click the code box to copy it. If the copy function doesn’t work, you can download the code from the button below.

Download Code
  1. Open your Blogger Dashboard.
  2. Go to Theme.
  3. Click Edit HTML.
  4. Search for the tag </body>.
  5. Paste the following code directly above the closing </body> tag.
<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 */
.Tresizerts{position:fixed;right:25px;bottom:150px;background:#fff;
box-shadow:0 0 5px #000;border-radius:5px;z-index:1;transition:.3s}
.darkMode .Tresizerts{background:var(--darkU);color:#fff;box-shadow:0 0 5px #fff}
#Ifont,#Dfont{font-size:18px;padding:10px;background:#fff;color:#000}
.darkMode #Ifont,.darkMode #Dfont{background:var(--themeC);color:#fff}
#Ifont{border-radius:5px 5px 0 0;border-bottom:.5px solid #000}
#Dfont{border-radius:0 0 5px 5px;border-top:.5px solid #000}
#Ifont:hover,#Dfont:hover{background:var(--themeC);color:var(--darkU)}
</style>

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
/* = 10) $(".postBody").css("font-size",curSize);
  });
});
/* ]]> */
</script>

That’s it!
You have successfully added the Text Resizer tool to your Blogger website. If you found this tutorial helpful, stay tuned for more useful guides and enhancements for your blog. Have a great day! 🙂

Post a Comment