How To Install Text Resizer Features On Your Website

0 14

How To Install Text Resizer Features On Your Website

Friends, today’s topic is how you can add Text Resizer Features to your blogger website because all the users who come to your site come from different devices like from a computer or laptop or from a mobile. .

 

So every visitor needs the font size of his account so that he can easily read your post, but the font size on his site does not necessarily look right to all, the size of the font to many users. Seemed low.

So in today’s post I am going to tell you how you can add Text Resizer Features to your blogger site so that any visitor can read your post in the font size of his choice. Make your site even more user friendly.

Urdu News PRO-Responsive Urdu News & Magazine Blogger Template

You must know that there are many plugins available in wordpress with the help of which you can easily add this Text Resizer Features in your wordpress site but in blogger we have to use some scripts to add it. I am going to tell you the same method and also give you the script with the help of which you can also add Text Resizer Features in your blogger site.

Read also: –

So friends for this you have to follow some steps given below: –

 

1. First you have to login to your blogger dashboard, then go to the theme section and open the coding of your theme by clicking on edit html.

 

2. After this you have to come to the bottom in the coding of your theme. Here you will find the close tag of the body.

 

<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>

 

3. After this you have to press CTRL + F then a search box will open in front of you. In this you have to search by typing <body. Given below.

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

4. After this you will see the </head> teg above this <body teg. Now you have to pest this code above this </head> teg which I have given you below.

<style>
.At-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>

5. Now you have to save your theme, just friends, we have done our job, now you can open any post of your site and see the side of your post, you will see + and – icons, now any visitor + You can increase the font size by clicking and you can reduce the font size by clicking on

 

So friends, I hope you liked this How To Install Text Resizer Features On Your Website post, then share this post with your friends.

Leave A Reply

Your email address will not be published.