Cara Membuat Dark Mode [Night Mode] di Blogger

Membuat Mode Gelap, Night, Malam Mode di Blogger
Membuat Mode Gelap, Night, Malam Mode di Blogger

Cara Membuat Dark Mode [Night Mode] di Blogger - Mode malam atau gelap, saat ini memanglah begitu sangat berfungsi bagi pemilik sebuah website atau blog yang sedang mereka kelola, di mana fungsi dari fitur button mode gelap atau malam ini bisa merubah tampilan suatu website atau blog yang awalnya terang akan menjadi gelap, dan juga dapat dilihat dengan baik baik saat malam hari dan siang hari maupun di ruangan gelap sekalipun, sehingga tidak merusak mata bagi seseorang yang sedang membaca di kegelapan bakan tidak terasa sakit dimata,

Dan untuk cara ini juga saya menggunakan cookies dimana cookies pada mesin pencari seperti chrome dll, yang sedang kalian pakai, gunanya mencatat aktivitas kalian, semisalkan kalian sudah menggunakan mode malam pada website saya pada sebelumnya, maka ketika kalian membuka website saya kembali, tampilannya masih sama yaitu mode malam, terkecuali kalian nonaktifkan mode malam tersebut, jadi cukup efektif buat kalian yang menanyakan apakah nantinya akan tersimpan saat kita close website atau blog yang kita kunjungi atau blog yang kita kelola sendiri. dalam membuat fitur button mode malam  sangat mudah untuk kalian lakukan. berikut cara dalam menerapkan mode malam atau night mode pada sebuah blog atau website yang sedang kalian kelola.

Cara Membuat Dark Mode [Night Mode] di Blogger

  1. Silahkan kalian masuk ke Dashboard Blogger kalian.
  2. Kemudian klik pada Menu Tema.
  3. Lalu kalian pilih pada menu Edit HTML.
  4. Kemudian kalian copy kode dibawah ini dan letakkan tepat diatas atau sebelum tag </body>
  5. <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>
    
    
  6. Selanjutnya, letakan kode dibawah ini tepat diatas atau sebelum tag </head>
  7. <style type='text/css'>
    /* Night Mode by RuangCoder.com */
    .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:&quot;&quot;;width:50%;height:100%}
    .togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
    .togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;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:&#39;&#39;;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 .class-baru{}
    .nightmode .class-baru{}
    </style>
    
    
    Perhatikan!
    Dapat kalian lihat kode diatas yang saya sudah block berwarna kuning yaitu terdapat code .class-baru dan juga kode .nightmode dimana kode tersebut merupakan contoh kode yang bisa kalian edit atau ubah dengan mengganti class atau ID tersebut di dalam bagian template tertentu yang ada di blok kalian. disini kalian bisa tambahkan class nightmode tersebut sebelum class atau ID dari bagian template kalian
  8. Tambah CLASS baru
  9. .nightmode .header{background:#222}
    
    .nightmode .title{color:#fff}
    
    
  10. Tentukan posisi fitur tersebut dengan kode dibawah ini
  11. 
    .Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
    
    
  12. Kemudian kalian klik Simpan Template
  13. Selesai..

Penutup 

Sampai disini dulu artikel tentang bagaimana "Cara Membuat Dark Mode [Night Mode] di Blogger" jika ada kesusahan dalam melakukan langkah - langkah diatas, atau kebingungan fungsi dari kode tersebut bisa langsung kalian tanyakan di kolom komentar, sekian dan Terimakasih semuanya.