How to Add Dark Mode Button in Blogger
Updated on 12 April
What is the dark mode button?
If you don't know that what is a dark mode button then don't worry I am here for you I will explain everything that what is dark button mode and how it works and how to create it. If you have a smartphone then I think you already know that what is in dark mode, it's also worked the same in blogger templates as it works in your smartphone, you can add a dark mode button in your blogger template if your blogger template doesn't have it. Nowadays there are many blogger templates that have a pre-installed dark mode button.Advantages of the night mode button
The night mode button is not a compulsory function in your blogger template its all depend on your choice that you want to add a night mode button or not, but if you want my suggestion then I suggest you to add a night mode button to your blogger template because night mode button makes your website more user friendly.Disadvantages of the night mode button
I don't think so that there is any disadvantage in the night mode button because it's a really cool feature that helps you to more interaction with your users and helps to give them a more user-friendly interface.How night mode button work?
If you know a little bit of HTML, CSS, and JavaScript then you will understand very easily and simply that how the night mode button works, but if you don't know any of this then please pay attention, let's see how the night mode button works, it's not easy to apply night mode button on your website and it's also not that much hard apply night mode button on your blogger template. There is a code in your blogger template that is known as CSS, CSS is the code that decides that what should the color of every element on your blogger template. If you want to apply the night mode button in your blogger template then you have to add another set of CSS with night colors, so whenever you click on the night mode button your default template CSS will not work on behalf of that the new dark mode CSS will work that we have added...Add dark mode button codes in the blogger template
If you want to add a dark mode button in your blogger template, then follow the simple steps given below,
Steps:
- Go to Blogger.com
- Click on Themes
- Then click on the arrow
- Then click go to edit
- Now Find </body>
- Then copy and paste the code is given below above </body>
<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script> - After This find </head>
- Then Paste the CSS code given below Above </head>
<style type='text/css'>
/* Night Mode CSS */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .Delete this line and Add Here{}
.nightmode .Delete this line and Add Here{}
</style>
Pay Attention
If it's all done then here comes the main part:
Or if you want to add post title CSS in Dark Mode CSS, then find the id of post title in Edit HTML, If your id is "Post-title" then the CSS code will be...
These are the 2 examples that how to create in dark mode CSS for your blogger template, it's very easy you just have to understand, and if you face any problem then you can contact me on Telegram anytime. After you created the dark mode CSS then copy and paste the CSS code in the night mode CSS section, or you can also paste CSS code ]]></b:skin>...
Please pay attention to the tips that I am going to tell you if you don't understand this it's then your dark mode button will never work properly so please pay attention, the CSS I provided you is not completed when you install and save it will not work properly. Because every blogger template has a different element ID is and I don't know the element ID of your blogger template so you have to cricket night mode CSS element for dark mode by yourself, it's very easy and simple so please pay attention and try to understand, So let's start...
In case you want to create night mode CSS for your blogger template header, then Go To Edit HTML and find your header id, if your header is "Header" then the CSS code will be...
.nightmode .header{background:#222}
.nightmode .post-title{color:#fff}
Also, edit this CSS code to adjust the position of the Night Mode button
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
Now it's all done, hope you don't face any issue with applying the dark mode button on your blogger template.
Conclusion
As I already mentioned that the dark mode button is not a compulsory function that you should have, it's just an extra feature that makes the User experience more comfortable, I know that adding a dark mode button in your blogger template looks like a very hard process but it's not, it's very simple and easy you just have to understand the value of code.
Cre: https://www.infinityblogger.in/2021/01/add-dark-mode-button-in-blogger.html
0 comments for How to Add Dark Mode Button in Blogger