Join Our Telegram Channel Join Now!

How to add Text resizer in Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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⤵
   View Demo 

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: 

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.