Text Resizer Feature Add In Your Blogger Theme!

Hey Guys! Welcome back to Techly420.

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.

    Once you click on the following codes, it will be copied

    Step 1

  • You will go to your - Blogger Dashboard
  • Go to Theme
  • Go to - Edit HTML
  • Search - </head> or &lt;/head&gt;
  • Copy this CSS Code below and Paste on top of </head> or &lt;/head&gt;
  • You must back up your theme before go to Edit HTML

    <style>
    /* Text Resizer */
    .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}
    </style>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>

    Step 2

  • After Paste CSS Code
  • Search - </body> or &lt;/body&gt;
  • Copy this HTML & Javascript Code below and Paste before - </body> or &lt;/body&gt;
  • Done.
  • <b:if cond='data:view.isPost'>
    <div class='Tresizerts'>
    <div id='Ifont'>A+</div>
    <div id='Dfont'>A-</div>
    </div>
    </b:if>
    <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>

    Conculation

    You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

    I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

    You Can Read This Post :
    Hey there! My name is Samir, a Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator. I love to Code and create interesting things while playing with it.

    Post a Comment

    Tᴇᴄʜʏ sꫝᴍɪʀ's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
    Created By

    Techly420.co

    All Posts are Protected By DMCA.
    Reproduction in Any Form is Strictly Prohibited!

    © Techly420. All rights reserved. Created byTechly420
    Go Up