How to Install Text Resizer Features on Blogger Website
Friends, today's topic is how you can add text resizing features to your blog website because all the users visiting your site come from different devices like computer, laptop or mobile phone.
So every visitor needs a font size of their choice so that they can easily read your post, but the font size on the app site is not necessarily suitable for everyone because many users have different font sizes. May like.
So in today's post, I will tell you how you can add text resizing features to your blogger site so that any visitor can read your post in their preferred font size. You can make your site more user friendly.
You may know that there are many plugins available in WordPress, with the help of which you can easily add these text resizer features to your WordPress site, but in Blogger we need some scripts to add them. It has to be used. So today I will tell you how to do it and I will introduce you to the script, which you can use to add text resizing feature to your blogger site.
So friends, for this you have to follow some steps given below:-
Step 1. First, you need to login to your dashboard blog, then you need to go to theme section and click edit html to open your theme markup.
Step 2. Next, you need to go to the bottom of your theme markup, here you will find the closing body</body> tag just above this code, you need to paste the below code.
<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> Step 3. After that, now you have to press CTRL + F, then a search box will open in front of you, where you have to search by typing <body>, you will get <body tag, now you have to paste it. . I have given you the code 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> Step 4. After that you will see a </head> tag on this <body teg, now you need to paste this tag on the </head> tag that 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 #20eb30 inset, 0 0 0 0 #20eb30; 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 #20eb30 inset, 0 0 10px 4px #20eb30;;margin-top: -2px; }
</style> Step 5. Now you want to save your theme, that's it guys, we are done, now you open any post on your site and you see + and - icon next to your post, now any visitor + payer You can zoom in. size by clicking and you can decrease the font size by clicking -
0 Comments