Cara Gampang Membuat Dark Mode Pada Blog

18 views

Sekarang lagi jaman ya dark mode, karena ketika menjelang malam hari ketika cahaya terlalu kontras dan lingkungan sekitar gelap akan membuat mata cepat lelah dan tidak baik untuk kesehatan mata, maka dari itu muncullah inovasi dark mode.

Sama halnya dengan instagram, dark mode blog ini juga memungkinkan para pembaca mengatur keterangan cahaya menjadi gelap disekitarnya sehingga akan menyesuaikan dengan lingkungan sekitar yang gelap.

Bacaan Lainnya

Cara Membuat Mode Malam (Dark Mode) Pada Blog

  1. Masuk kehalaman blogger
  2. Pilih Themes/tema
  3. Pilih edit HTML
  4. Klik CTRL+F untuk memunculkan kotak pencarian kemudian cari ]]></b:skin>
  5. Kemudian paste kode css ini dibawah kode tersebut
 body {     margin: 0;     padding: 0;     font-family: sans-serif;     transition: 0.5s; } body.night {     background: #00151f; } .toggle {     position: absolute;     top: 40px;     right: 50px;     background: #fff;     border: 2px solid #00151f;     width: 45px;     height: 20px;     cursor: pointer;     border-radius: 20px;     transition: 0.5s; } .toggle.active {     background: #00151f;     border: 2px solid #fff; } .toggle:before {     content: '';     position: absolute;     top: 2px;     left: 2px;     width: 16px;     height: 16px;     background: #00151f;     border-radius: 50%;     transition: 0.5s; } .toggle.active:before {     left: 27px;     background: #fff; } .content {     margin: 100px auto;     width: 1000px; } .content h1 {     margin: 0 0 20px;     padding: 0;     color: #000;     transition: 0.5s; } .content p {     margin: 0;     padding: 0;     color: #000;     transition: 0.5s;     font-size: 18px; } body.night .content h1, body.night .content p {     color: #fff; }

Kemudian pastekan kode javascript dibawah ini tepat diatas kode </body>

 
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.toggle').click(function(){
            $('.toggle').toggleClass('active')
            $('body').toggleClass('night')
        })
    })
</script>

Kemudian letakan kode <div class=”toggle”></div> di antara <body>…..</body>, bebas di mana saja , seperti contoh :

<body> …

<div class=”toggle”></div>

… </body>

Dan silahkan lihat perbedaannya sekarang, ada tombol night mode nya sekarang pengunjung tidak perlu sakit lagi matanya akibat terlalu terang.

Pos terkait