Cara Membuat Night Mode di Blogger dengan Cookie - Arlina Design
Night Mode adalah sebuah fitur yang bertujuan untuk membuat tampilan menjadi gelap. Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat yaitu menghemat penggunaan baterai.

Cara Membuat Night Mode di Blogger dengan Cookie

Di sini Arlina Design akan berbagi tips tentang Cara Membuat Night Mode di Blogger dengan Cookie. Di sini saya menambahkan fitur Cookie agar saat kita refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun sobat sudah berganti halaman. Bagaimana, menarik bukan? Bagi yang tertarik memasang fitur Night Mode ini silakan ikuti langkah-langkah di bawah ini.

Cara Membuat Night Mode di Blogger dengan Cookie


Pertama buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode ini sebelum kode </body>

<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>

Kemudian tambahkan kode CSS ini sebelum kode </head>

<style type='text/css'>
/* Night Mode */
.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 kode yang ditandai, kode tersebut merupakan contoh kode yang bisa sobat edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu template sobat. Silakan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin sobat ubah pada saat Night Mode aktif. Contohnya seperti ini :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Edit juga kode CSS ini untuk menentukan posisi dari tombol Night Mode

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Jika sudah selesai mengedit semua yang dibutuhkan, klik tombol Simpan tema dan lihat hasilnya di blog sobat.


Klik tombol di bawah ini untuk melihat contoh dari penerapan fitur Night Mode di Blogger. Klik tombol Night Mode yang posisinya berada di pojok kanan atas.


Lunar Responsive Blogger Template


Lunar Responsive Blogger Template

Nah, bagi sobat yang tertarik dengan template yang digunakan pada percobaan Night Mode di atas. Berikut ini Lunar Responsive Blogger Template bisa sobat download di sini :


Untuk fitur-fitur pada template Lunar seperti yang sobat lihat di halaman Result. Jadi tidak perlu menanyakan hal yang tidak ada, contohnya "Kok tidak ada sidebarnya? Kok tidak ada kolom komentarnya? Kok ini, kok itu..." Oke!

Sekian dari Arlina Design untuk postingan kali ini tentang Cara Membuat Night Mode di Blogger dengan Cookie. Semoga bermanfaat dan wassalam.

Cara Membuat Night Mode di Blogger dengan Cookie

Night Mode adalah sebuah fitur yang bertujuan untuk membuat tampilan menjadi gelap. Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang memiliki manfaat yaitu menghemat penggunaan baterai.

Cara Membuat Night Mode di Blogger dengan Cookie

Di sini Arlina Design akan berbagi tips tentang Cara Membuat Night Mode di Blogger dengan Cookie. Di sini saya menambahkan fitur Cookie agar saat kita refresh halaman yang sudah diaktifkan dengan Night Mode tidak akan kembali ke mode awal meskipun sobat sudah berganti halaman. Bagaimana, menarik bukan? Bagi yang tertarik memasang fitur Night Mode ini silakan ikuti langkah-langkah di bawah ini.

Cara Membuat Night Mode di Blogger dengan Cookie


Pertama buka halaman Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode ini sebelum kode </body>

<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>

Kemudian tambahkan kode CSS ini sebelum kode </head>

<style type='text/css'>
/* Night Mode */
.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 kode yang ditandai, kode tersebut merupakan contoh kode yang bisa sobat edit dengan mengganti .class-baru dengan class atau ID di dalam bagian tertentu template sobat. Silakan tambahkan .nightmode sebelum class atau ID dari bagian template yang ingin sobat ubah pada saat Night Mode aktif. Contohnya seperti ini :

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Edit juga kode CSS ini untuk menentukan posisi dari tombol Night Mode

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Jika sudah selesai mengedit semua yang dibutuhkan, klik tombol Simpan tema dan lihat hasilnya di blog sobat.


Klik tombol di bawah ini untuk melihat contoh dari penerapan fitur Night Mode di Blogger. Klik tombol Night Mode yang posisinya berada di pojok kanan atas.


Lunar Responsive Blogger Template


Lunar Responsive Blogger Template

Nah, bagi sobat yang tertarik dengan template yang digunakan pada percobaan Night Mode di atas. Berikut ini Lunar Responsive Blogger Template bisa sobat download di sini :


Untuk fitur-fitur pada template Lunar seperti yang sobat lihat di halaman Result. Jadi tidak perlu menanyakan hal yang tidak ada, contohnya "Kok tidak ada sidebarnya? Kok tidak ada kolom komentarnya? Kok ini, kok itu..." Oke!

Sekian dari Arlina Design untuk postingan kali ini tentang Cara Membuat Night Mode di Blogger dengan Cookie. Semoga bermanfaat dan wassalam.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo