Hello! Welcome to
Tecky AaryaN.
You are looking for How to Add Text resizer functionality in Blogger then this post is just for you.
You can see the demo here⤵
How to add Text Resizer functionality in blogger?
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: Go to
Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'Customize' button.
Step 4: Now click on Edit HTML
Step 5: Now search the code </body> Paste the following Codes just above to it.
<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 Tecky AaryaN */
.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 10: Then Save the
HTML.
Conclusion
I hope you have successfully added Text resizer in Blogger. If you are facing any problem in any section or you have any question then ask us in the comment box.
Copyright: