How to Add Read Mode Feature in your Website
Hey Guys! Welcome back to Techly Series website.
Assuming You are observing the Read Mode Script on blogger. This is the Right Place to you. Since You can get this Script for free.
Today, in this article, I will Discuss with you about How to Add Read Mode Feature in your Website.
How to Add
So, to add Read Mode on blogger you need to follow the following process below precisely.
What's more, with the help of these steps, you can easily add this feature in your blogger website.
Step 1
- You will go to your - Blogger Dashboard
- Go to Theme
- Go to - Edit HTML
- Search - </head> or </head>
- Copy this CSS Code below and Paste on top of </head> or </head>
You must back up your theme before go to Edit HTML
<style>
.readMode:before{content:'';z-index:99999!important;background:#222222!important;pointer-events:none;position:fixed;top:-30%;right:-30%;width:150%;height:150%;opacity:0.5;mix-blend-mode:multiply;display:block}
.tsRead #svg-2{display:none}.readMode .tsRead #svg-1{display:none}.readMode .tsRead #svg-2{display:block}
</style>
Step 2
- After Paste CSS Code
- Search - <body> or <body>
- Copy this Javascript below and Paste after - <body> or <body>
<script>/*<![CDATA[*/
function readMode(){localStorage.setItem("read","readmode"===localStorage.getItem("read")?"unread":"readmode"),"readmode"===localStorage.getItem("read")?document.querySelector("body").classList.add("readMode"):document.querySelector("body").classList.remove("readMode")}; (localStorage.getItem('read')) === 'readmode' ? document.querySelector('body').classList.add('readMode') : document.querySelector('body').classList.remove('readMode')
/*]]>*/</script>
Step 3
- After Paste Javascript Code
- Copy this HTML Code and Paste anywhere you like
- Done.
<div onclick='readMode()'>
<svg id='svg-1' viewBox='0 0 24 24'><path d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5c.36 0 .72 0 1.08-.05a6.09 6.09 0 0 1-.08-.95c0-.36.04-.72.1-1.08c-.36.04-.73.08-1.1.08c-3.76 0-7.17-2.14-8.82-5.5a9.821 9.821 0 0 1 17.64 0c-.12.24-.26.45-.39.68c.66.16 1.29.43 1.86.82c.27-.5.51-1 .71-1.5c-1.73-4.39-6-7.5-11-7.5M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m6 5.5v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z' fill='currentColor'/></svg>
<svg id='svg-2' viewBox='0 0 24 24'><path d='M12 4.5A11.8 11.8 0 0 0 1 12a11.8 11.8 0 0 0 11 7.5h1.1a3.8 3.8 0 0 1-.1-1a4.1 4.1 0 0 1 .1-1.1H12A9.6 9.6 0 0 1 3.2 12A9.6 9.6 0 0 1 12 6.5a9.6 9.6 0 0 1 8.8 5.5l-.4.7a4.6 4.6 0 0 1 1.9.8A10.1 10.1 0 0 0 23 12a11.8 11.8 0 0 0-11-7.5M12 9a3 3 0 1 0 3 3a2.9 2.9 0 0 0-3-3m3 8.5v2h8v-2Z' fill='currentColor'/></svg>
</div>
Final Words
You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.
I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.
Assuming you experience any issues while copying this script you can impart me by Telegram and I'll attempt to help.
1 comment