How to add Text resizer in Blogger

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='textResizer'>

    <div id='increaseFont'>A+</div>
    <div id='decreaseFont'>A-</div>

  </div>

</b:if>

<style>

  /* Text Resizer CSS */
  .textResizer {
    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 .textResizer {
    background: var(--darkU);
    color: #ffffff;
    box-shadow: 0 0 5px #ffffff;
  }

  #increaseFont, #decreaseFont {
    font-size: 18px;
    padding: 10px;
    box-sizing: border-box;
    background: #ffffff;
    color: #000000;
  }

  .darkMode #increaseFont, .darkMode #decreaseFont {
    background: var(--themeC);
    color: #ffffff;
    border-color: #ffffff;
  } 

  #increaseFont {
    border-radius: 5px 5px 0 0;
    border-bottom: .5px solid #000000;
  } 

  #decreaseFont {
    border-top: .5px solid #000000;
    border-radius: 0 0 5px 5px;
  } 

  #increaseFont:hover, #decreaseFont:hover {
    background: var(--themeC);
    color: #ffffff;
  }

</style>

<!-- Load jQuery -->
<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>

<script>
  /*<![CDATA[*/ 
  $(document).ready(function() {
    // Increase font size
    $("#increaseFont").click(function() {
      let curSize = parseInt($(".postBody").css("font-size")) + 1;
      if (curSize <= 20) {
        $(".postBody").css("font-size", curSize);
      }
    });

    // Decrease font size
    $("#decreaseFont").click(function() {
      let curSize = parseInt($(".postBody").css("font-size")) - 1;
      if (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: 

Tecky AaryaN

Go to Link