How to add text resizer function in blogger website - Peak Fiction. Text resizer in posts for blogger. Blogger widget, blogger tricks, blogspot tips

Hey everyone, welcome back to Peak Fiction. Today, we're diving into accessibility and user experience with a nifty tool for your Blogger blog: a text resizer widget.
How to add text resizer function in blogger website - Peak Fiction

Why Text Resizers?

Imagine this: you're browsing a blog, excited to read, but the font is tiny! Squinting strains your eyes, and zooming in messes with the layout. Frustrating, right? That's where text resizer widgets come in. They empower readers, especially those with visual impairments, to adjust font size to their comfort level. It's a small change with a big impact:
  • Accessibility: Ensures everyone can enjoy your content, regardless of their vision needs.
  • Improved User Experience: Readers can personalize their experience, leading to better engagement.
  • WCAG Compliance: Helps your blog meet WCAG 2.0 AA guidelines for text resizing (up to 200%).

Adding the Text Resizer Widget:

Ready to give your readers control? Here's how to add a text resizer widget to your Blogger blog:
Step 1: Login to your Blogger Dashboard.
Step 2: Click "Theme" and then the down arrow next to "Customize."
Step 3: Select "Edit HTML."
Step 4: Find the code </body>. This is usually near the bottom.
Step 5: Paste the followig code just above </body>:
<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 6: Save your changes.

That's it! Now your blog has a text resizer widget. Users will see a handy button or slider that allows them to adjust the font size to their liking.
Remember: Adding a text resizer is a simple but meaningful step towards creating a more inclusive and enjoyable experience for all your readers. So, go ahead, implement it today and watch your blog become a more accessible and welcoming space!
Feel free to share your experiences and questions in the comments below!
Happy blogging!
P.S. Keep an eye out for future articles where we'll explore other ways to make your Blogger blog more user-friendly and accessible.