How to Add Read Mode Screen Shader in Blogger
Hi to all, in this article I am goin to tell you all about how to add read mode shader in your blogger website easily in just few minutes by using HTML, CSS and JavaScript.
Basically read mode screen shader is a type of dark or night mode we actually see in few websites.
This actually makes a dark layer to protect your eyes from blue light emitting from your mobiles and computers.
If your website doesn't consist of darks mode or night mode then you can add this dark mode screen shader in your blogger website to help your visitors to read your post without any interruption.
So you have to read the below provided steps carefully to get clear understanding about adding the read mode screen shader in blogger website without any issue or error.
Steps to Add Read Mode in Blogger
Step-1: Sign-in to Blogger
First of all you need to sign-in to your blogger website dashboard by using your login credentials.
Step-2: Backup your Blogger theme
If you get any issue or error while saving the code then, this backup theme will be used to restore your website again and run your blog as usual.
Now you need to follow the below provided path:
Blogger website dashboard -> Theme section -> Arrow icon -> Backup -> Download theme.
Step-3: Opening Blogger theme editor
Here after successfully backup of your theme, you need to follow the below path to add the code:
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor.
Step-4: HTML code for Read Mode Screen Shader
Now you need to copy below provided HTML code and paste the copied HTML code just above body tag or <body> tag.
<button class='AT-Screen-Shader'> <svg style='width:24px;height:24px;vertical-align: middle;' viewBox='0 0 24 24'> <path d='M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16C9.37,16 7,14.43 6,12C7.38,8.69 11.19,7.12 14.5,8.5C16.08,9.16 17.34,10.42 18,12C17,14.43 14.63,16 12,16M12,9.5A2.5,2.5 0 0,0 9.5,12A2.5,2.5 0 0,0 12,14.5A2.5,2.5 0 0,0 14.5,12A2.5,2.5 0 0,0 12,9.5M12,13A1,1 0 0,1 11,12A1,1 0 0,1 12,11A1,1 0 0,1 13,12A1,1 0 0,1 12,13Z' fill='currentColor'/> </svg> </button>
Step-5: CSS for Read Mode Screen Shader
Now you need to copy the below provided CSS code and paste the copied CSS code above closing head tag or </head> tag.
<style>
/* CSS Screen shader */
.AT-Screen-Shader { padding:8px; color: #FFF; position: fixed !important; bottom: 68px; right: 20px; z-index: 998; background: black; outline: 0; border-radius: 50%; cursor: pointer; }
#readmode.active{z-index:2147483647;margin:0;border-radius:0;padding:0;background:#111111!important;pointer-events:none;position:fixed;top:-10%;right:-10%;width:120%;height:120%;opacity:0.3600;mix-blend-mode:multiply;display:block}
</style>
Step-6: JavaScript Code for Read Mode Screen Shader
Now you need to copy below provided JavaScript code and paste the copied JavaScript code above closing body tag or </body> tag.
<div id='readmode'/>
<script defer='defer' type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".AT-Screen-Shader").click(function(){
$("#readmode").toggleClass("active");
});
});
//]]>
</script>
Step-7: Saving the code
After adding the three code successfully, then you need to click on the save icon to save the complete theme.
It will take few seconds to process the complete blogger theme and then after successful processing, you get a message i.e. Updates Successfully.
Step-8: Test your Website
You have successfully added the read mode screen shader in your blogger website dashboard by using HTML, CSS and JavaScript codes without any error.
Now open your website and check once the read mode screen shader is working properly or not, if not working then you nee to repeat the same process again as mentioned above.
Final Verdict
By adding this read mode screen shader will help your users or visitors to read your blog post in any dark condition without effecting their eyes.
The code codes given above are light weight and no extra CSS used here and website speed will not effect by adding this read mode.
Add this read mode screen shader to those blogger templates, where there is no dark mode option, so you can use this read mode option to act as a dark mode to your blogger website.
I hope that you have understood about adding read mode screen shader to your blogger website easily in just few minutes by using HTML, CSS and JavaScript.
