Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

blogger widgets | How To Add Button To Change Text Size In Blogger Posts

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated




Change Text Size is a button that zooms in and out of the letters of your blog post. This text resize button usually looks like 'A-' to zoom out and 'A+' to zoom out. But it also depends on each blog that it will have different buttons.




Text resizing is useful for the convenience of blog visitors, as it can adjust the size of the letters according to their needs or adjust to the width of the screen. Especially to help people with visual impairment can see more easily.

How to Add Button to Change Post Text Size on Blogger


Adding a text resize button is simple, and this JS and CSS won't affect your site's speed either.

Step 1: Login to Blogger.

Step 2: On Blogger dashboard, Select Theme ➺.Edit HTML .

Step 3: Find the </body> tag and paste this JS above it.

<script>//<![CDATA[
$('').ready(function() { 
 $('#incfont').click(function(){ 
 curSize= parseInt($('.post-body, .post-info').css('font-size')) + 2;
 if(curSize<=22)
 $('.post-body, .post-info').css('font-size', curSize);
 }); 
 $('#decfont').click(function(){ 
 curSize= parseInt($('.post-body, .post-info').css('font-size')) - 2;
 if(curSize>=12)
 $('.post-body, .post-info').css('font-size', curSize);
 }); 
 });
//]]></script>


  • + 2 and - 2 : Change the number your way to zoom in more.
  • post-body : Default is post-body.



Step 4: Find the <body> or <body id='mainContent'> tag and add this HTML below it.

<b:if cond='data:view.isSingleItem'><div class='NLam-texresizer'><div class='text-A+' id='incfont'><b>A+</b></div><div class='text-A-' id='decfont'><b>A-</b></div></div></b:if>


Step 5: Find the </head> or </head> and add CSS on top of it.

<b:if cond='data:view.isSingleItem'>
<style>
 .NLam-texresizer { position: fixed; color: #ffffff; right: 30px; bottom: 180px; z-index:998;background-color:black; } #incfont, #decfont{font-size:18px;padding: 8px 10px; box-shadow: 0 0 40px 40px #e74c3c inset, 0 0 0 0 #e74c3c; box-sizing: border-box; background-color: transparent; border: 1px solid #fff;cursor: pointer;-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out;}#incfont:hover, #decfont:hover { box-shadow: 0 0 10px 0 #e74c3c inset, 0 0 10px 4px #e74c3c;;margin-top: -2px; }
 </style>
 </b:if>


Step 6: Click Save theme and return to your blog homepage to try it.

Conclude


So I showed you how to add resize button to blogger posts. If you are facing any problem, please comment below.
Read Also

Getting Info...

Post a Comment

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.