Add Text Resizing feature in Blogger

Hello Guys! Welcome to Shiva Technic World in this article we are going to show you how to add a Text Resizing feature in Blogger. So let's check.

Advantages of Text Resizer

The Text Resizer helps visitors with low vision to adjust the font size of the website and visitors does not want to go to another website with big font. And it's responsive so it will show properly on both desktop and mobile devices.

Which type of codes are used?

This Text Resizer used HTML and Javascript codes and added some texts.

How it works?

It will increase the font size by clicking (A+) and decrease the font size by clicking (A-).

How to Add Text Resizer in Blogger?

First, go to Blogger
Then click on the Theme option
Then you can see a down arrow near customize click on that
Then click on Edit HTML
Then press CTRL+F and find </body> or </body>

Then paste this javascript above that

<script>//<![CDATA[
$('').ready(function() { 
  $('#incfont').click(function(){    
        curSize= parseInt($('.post-body, .post-info').css('font-size')) + 2;
  if(curSize<=22)
        $('.post-body, .post-info').css('font-size', curSize);
        });  
  $('#decfont').click(function(){    
        curSize= parseInt($('.post-body, .post-info').css('font-size')) - 2;
  if(curSize>=12)
        $('.post-body, .post-info').css('font-size', curSize);
        }); 
 });
//]]></script>

Then find <data:post.body/> and paste this HTML code above that or add anywhere in HTML that you want to show Text Resizer.

<b:if cond='data:view.isSingleItem'>
 <a class='STW-Textresizer'><a class='text-A+' href='javascript:void;' id='incfont'><b>A+</b>
 <a class='text-A-' href='javascript:void;' id='decfont'><b>&#160; A-</b></a></a></a>
</b:if>

Last Words!

Hope this article will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting! Have a nice day!

About

Website : Shiva Technic World
Created on: January 15,2022
Used codes: Javascript, HTML
Tags: Text Resizer, Advantages of Text Resizer, Buttons, Text Resizer features