In today's digital age, accessibility is a key component of user experience. Ensuring that your website is readable for all visitors, including those with visual impairments, is crucial. One way to achieve this is by adding dynamic text resizing options to your Blogger site. In this tutorial, I'll walk you through the process of adding buttons that allow visitors to easily adjust the text size to their preference.
Understanding the Basics
Before we dive into the code, it's important to understand the functionality we are adding. The increase text size button will enlarge the text, making it easier to read for those with visual impairments. Conversely, the decrease text size button will shrink the text, allowing users to choose their preferred text size.
Video Tutorial Related to This Topic
If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.
Adding the Buttons to Your Blogger Site
To add the text resizing buttons to your Blogger site, follow these steps:
Step 1: Login to Blogger dashboard then go to Themes.
Step 2: Click on the icon next to the Customize button.
Step 3: Press Ctrl + F and search for the </head> tag.
Step 4: Copy the code below and paste it above </head>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>
Step 5: Again search for the tag ]]></b:skin>
Step 6: Now copy the code below and paste it above that code.
.txt-rsr{position: fixed;right: 25px;bottom: 120px;background: #ffffff;box-shadow: 0 0 5px #000000;border-radius: 5px;box-sizing: border-box;z-index: 1;transition: all 0.3s linear}.darkMode .txt-rsr{background: var(--darkU);color: #ffffff;box-shadow: 0 0 5px #ffffff}#Ifont, #Dfont{font-size: 16px;padding: 6px;box-sizing: border-box;background: #ff0033;color: #ffffff}#Ifont:hover,#Dfont:hover{background: var(--themeC);color: #ffffff}#Ifont{border-bottom: 0.5px solid #000000}#Dfont{border-top: 0.5px solid #000000}
Step 7: Lastly search for the </body> tag and paste both code below
above it.
<b:if cond='data:view.isPost'>
<div class='txt-rsr'>
<div id='Ifont'><svg class='line' viewBox='0 0 24 24'><path d='M6 12H18'/><path d='M12 18V6'/></svg></div>
<div id='Dfont'><svg class='line' viewBox='0 0 24 24'><path d='M6 12H18'/></svg></div>
</div>
</b:if>
<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 8: Finally, Click the icon to save the changes.
Conclusion
By following these simple steps, you've successfully added dynamic text resizing buttons to your Blogger site, enhancing its accessibility. Now, visitors can easily adjust the text size to suit their needs, making your content more accessible and user-friendly. Remember, improving accessibility not only benefits users with disabilities but also enhances the overall user experience for all your visitors.
