Membuat Night Mode Di Blog Dengan Cookie

Night mode adalah sebuah fitur yang bertujuan untuk membuat tampilan menjadi gelap, ini dimaksudkan agar mata pengguna tidak sakit saat melihat layar dalam kondisi minim cahaya(gelap).

Oke sob, Kali ini kita akan membahas bagaimana cara membuat night mode di blog dengan bantuan cookie. Saya rasa penjelasan saya diawal sudah jelas apa itu yang disebut night mode dan fungsinya untuk apa. Sekarang tinggal saya jelaskan sedikit apa kegunaan cookie pada fitur night mode ini. Jadi dengan bantuan cookie kita dapat mempertahankan night mode ini walaupun halaman dimuat ulang(reload) atau berpindah halaman sekalipun.

Sekarang menurut saya sudah jelas semuanya. Mari kita beralih ke tahap selanjutnya yaitu cara pembuatan fitur night mode ini.

Cara Pembuatan

1. Pertama-tama pasang dulu jquery di template sobat, jika sobat belum memasangnya. Soalnya nanti kita akan menggunakan kode jquery.

2. Setelah itu sobat juga harus memasang javascript cookienya. Untuk cara pemasangannya lihat artikel saya yang ini sob.

3. Selanjutnya, barulah kita buat tombol yang berfungsi untuk merubah ke night modenya. Sobat bisa letakkan kodenya dimana saja sesuai keinginan.


<button id="night-mode">Dark Mode</button>

3. Selanjutnya letakkan kode dibawah ini sebelum </body>.

Uncompressed
Compressed


<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    if (readCookie("night")) {
        $("*").addClass("night");
        $("#night-mode").html("Light Mode")
    }
    $("#night-mode").click(function() {
        if ($(this).hasClass("night")) {
            $("*").removeClass("night");
            $("#night-mode").html("Dark Mode");
            eraseCookie("night")
        } else {
            $("*").addClass("night");
            $("#night-mode").html("Light Mode");
            createCookie("night", null, 7000)
        }
    })
})
//]]>
<script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){readCookie("night")&&($("*").addClass("night"),$("#night-mode").html("Light Mode")),$("#night-mode").click(function(){$(this).hasClass("night")?($("*").removeClass("night"),$("#night-mode").html("Dark Mode"),eraseCookie("night")):($("*").addClass("night"),$("#night-mode").html("Light Mode"),createCookie("night",null,7e3))})});

//]]>

<script>

5. Kalau sudah sekarang kita tinggal membuat kode cssnya agar tampilan berubah menjadi warna gelap semua. Caranya dengan menambah .night pada elemen yang ingin diubah warnanya. Supaya tidak bingung lihat contoh dibawah ini :


tag.night {
    background:#303030;
    color:#fff
}
#id.night {
    background:#303030;
    color:#fff
}
.class.night {
    background:#303030;
    color:#fff
}

Lihat kode yang saya tandai, ganti kode tersebut dengan id/class/tag elemen html yang ingin diubah warnanya. Hasil keseluruhannya kurang lebih seperti ini sob :


<head>
   <style type="text/css">
      body {
        background:#fff
      }
      #night-mode {
        background:#fff;
        border:none;
        outline:none;
        border-radius:2px;
        padding:10px;
        color:#000;
        cursor:pointer
      }
      body.night {
        background:#303030
      }
      #night-mode.night {
        background:#303030;
        color:#fff
      }
   </style>
   <script type="text/javascript" src="/jquery.min.js"></script>
</head>
<body>
   <button id="night-mode">Dark Mode</button>
   <script type="text/javascript">
      //<![CDATA[
      
      // MASUKKAN KODE JAVASCRIPT COOKIE DISINI, SEBELUM KODE DIBAWAH INI
      
      $(document).ready(function() {
          if (readCookie("night")) {
              $("*").addClass("night");
              $("#night-mode").html("Light Mode")
          }
          $("#night-mode").click(function() {
              if ($(this).hasClass("night")) {
                  $("*").removeClass("night");
                  $("#night-mode").html("Dark Mode");
                  eraseCookie("night")
              } else {
                  $("*").addClass("night");
                  $("#night-mode").html("Light Mode");
                  createCookie("night", null, 7000)
              }
          })
      })
      //]]>
   </script>
</body>

Supaya sobat lebih jelas lagi, silahkan lihat demo dan kodenya dibawah ini :

Sekian artikel amburadul ini, semoga bermanfaat bagi sobat sekalian. Jika ada yang kurang jelas sobat bisa bertanya dikolom komentar. terima kasih.

Membuat Night Mode Di Blog Dengan Cookie - PintasanOKE

Friday 15 April 2016

Membuat Night Mode Di Blog Dengan Cookie

Cara Pembuatan