Text Resizer Feature Add In Your Blogger Theme!

Hello, Bloggers! Welcome to Raghavendra Technic.

I Hope You are observing the Text Resizer Script on blogger. This is the Right Place to you. Since You can get this Script for free.

Today, in this article, I will Discuss with you about How to Add Text Resizer Feature in your Website.

What is Text Resizer

Text resizing permits clients who are outwardly disabled to expand the size of content without assistive innovation while keeping up with admittance to and usefulness of the substance. Giving a technique to resize text will permit web content to meet WCAG 2.0 AA Guideline 1.4.4. Rule 1.4.4 expects that text can be resized up to 200% of the first size. This rule doesn't demonstrate a particular technique for giving this resizing nor is a "best" approach determined.

Benefits

Client doesn't need to realize where the on-page controls are to change his/her settings.

Client text dimension settings can be set once, universally, in a program and need not be set on a for each site premise.

For the most part, just a solitary template is required.

Content may naturally reflow when displayed on restricted size presentations and compact gadgets.

Content might give the capacity to resize past additions determined utilizing Explicit Text Size Method.

Gives a serious level of command over page design and settings.

Client shouldn't know about the program's zoom and text size settings.

Offers help for an enormous number of programs since it doesn't depend on base text dimension of a given program.

Works reliably across all program zoom highlights.

Communicates obligation to giving numerous text dimensions to pages.

How to Add

So, to add Text Resizer Feature on blogger you need to follow the following process below precisely.

What's more, with the help of these steps, you can easily add this feature in your blogger website.

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 ]]></b:skin> and paste the following CSS Codes just above to it.

/* Text Resizer by (T_MK) */
.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:#121212;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:#121212;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:linear-gradient(to right,#f81894,#0000ff);color:#ffffff}

Step 6: Now search the code </head> and paste the following Codes just below to it.

<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<b:if cond='data:view.isPost'>
<div class='Tresizerts'>
<div id='Ifont'>A+</div>
<div id='Dfont'>A-</div>
</div></b:if>

Step 7: Now search the code </body> and paste the following Codes just above to it.

<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 8: Now click on Save by clicking this icon

Step 9: That's done!

---

Credit

Created by : Techly420.

Conclusion

In this article I have made a tutorial on Text Resizer Feature Add In Your Blogger Theme!. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

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. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com

Go to Link