If You Want top backlinks or free guest posting on our blog Lets do it Join in Google News



How to add button dark mode on blogger blog or html 5 code

How to add button dark mode on blogger blog or html 5 code
How to add button dark mode on blogger blog or html 5 code

How to add button dark mode on blogger blog or html 5 code

hello everyone welcome to our new blog, usually I update articles or tutorials on my main site at www.miusm-tech.com which you know on my main site themed online shop, but I decided to make this site or blog for I use specifically to update articles or tutorials. Of course, so that you, my loyal readers, can be more comfortable and focus on what you are looking for.

This blog was also created on Feb 09, 2022 yesterday, to make it official in the first post on this blog I will share a simple tutorial, namely how to make dark mode or dark mode on blogspot. here I added the Cookie feature so that when we refresh the page that has been activated with dark mode it will not return to the initial mode even though you have changed pages

How to Add dark mode on Blogger.(update version 2022) & Advantages of Installing Dark Mode on Blogs

As we know, nowadays most people spend a lot of time looking at the screen of their digital device, be it a smartphone or a desktop. With the presence of this dark mode, users can rest their tired eyes from having to look at a bright screen.

Based on data obtained from business2community.com, looking at a bright screen for too long can have several effects, such as eye strain, dry eyes, dizziness, and others. so I highly recommend you to add a dark mode feature on your site / blog of course it will make our readers comfortable too.

before that make sure your template already has a jQuery script, if not, please paste the code above </head>

  <script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

How to Add Dark Mode Button in Blogger & How To Make Dark Mode On Blogspot With Cookies

first, open your blogspot dashboard, click on the theme and click on the edit button HTML , add the code below above the code </body>
<div class="Switchdark">
      class="toggledarkBS toggledarkBS-switch"
    <label class="toggledarkBS-btn" for="darkmode">
      <svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg>
      <svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label>
  <script type="text/javascript">
  // Dark Mode

then add the css below above the code </head>

<style type='text/css'>
  /* Dark Mode */
  .toggledarkBS-btn{display:flex;align-items:center; width:26px;height:26px;}
  .toggledarkBS-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
  .toggledarkBS-btn .svg-1{display:inline-block}
  .toggledarkBS-btn .svg-2{display:none}
  .toggledarkBS-switch:checked + .toggledarkBS-btn .svg-1{display:none}
  .toggledarkBS-switch:checked + .toggledarkBS-btn .svg-2{display:inline-block}
  .darkmode .toggledarkBS-btn svg{stroke:#fefefe}
  .darkmode .class-baru{}
  .darkmode .class-baru{}

how to write a new class must start with a dot while for ID it must start with #hastag, also edit the css of this section to determine the position of the dark mode button


if you have, please click save and see the results, here are some ways to make dark mode or dark mode on blogspot / blogger , hopefully it's useful and thank you for visiting.

Thanks for reading: How to add button dark mode on blogger blog or html 5 code, Sorry, my English is bad:)

About the Author

Hi Greetings! thanks for reaching here, We are so delighted to welcome you on board. Your intelligence and energy make you an asset to your family and love ones.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It Look like there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.