Blogger Blog Mein Dark Night Mode Kaise Add Kare Better For Eyes.
how to make a dark mode dark mode website design. html darello Blogger website users today i know How to Add Dark Mode Night mode Button in Blogger html Website Better for eyes, yes today we are going to learn, how to create 🌑 mode button in our blogger web templates.
What is "dark mode" button good on to website.
So Gaye's If you don’t know what is a dark mode button then don’t worry I am here for your "help" Yes I will explain everything that what is dark 🔘 mode and how it works and how to create it. and so 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 website 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 is better.
Advantages of the night mode button is better for eye.!
The night mode button is not a compulsory functions in your blogger template's 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 website because night mode button makes your website more user friendly SEO Optimistic premium looking.
Disadvantaged of the night mode button!
I don’t think so that there is any disadvantaged 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 Responsible interface Website.
How is work night mode button?
How To Add Dark Mode To Blogger Website Better For Eyes.
- Go to Blogger.com .
- Click on Themes Then press
- on the arrow Then click go to edit Now Find Then copy
- paste the code is given below above.
<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>
So friends After This find </head>
Then Paste the CSS code given below Above </head> tag .
<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 Attentions!
If it’s all done then here comes the main part:
Please pay attention to the tips that I am going to tell you if you don’t understanding 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 differently elements 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 see..
.nightmode .header{background:#222}
And 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 like this.
.nightmode .post-title{color:#fff}
This is 2 type 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>…
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}
So finally 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 website 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 codes . happy blogging 😶😃😊
Read More : How to stylish coding box in blogger website.
How to add stylish facebook popup like box widget in blogger.