Cara Membuat dan Memasang Night Mode di Blogger Menggunakan Cookie

Cara Membuat dan Memasang Night Mode di Blogger Menggunakan Cookie

Night Mode merupakan sebuah fitur yang kini tengah menjadi favorit banyak blogger. Bagaimana tidak dengan tambahan fitur ini, akan membuat para pengunjung merasa nyaman dalam membaca artikel yang ada dalam blog kita. Fitur ini bertujuan membuat tampilan blog kita menjadi gelap, jadi pengunjung akan terasa nyaman dalam membaca artikel

Fitur ini biasanya kita temui pada perangkat mobile yang menyematkan fungsi Night Mode atau Dark Mode yang juga memiliki manfaat menghemat penggunaan battery. Fitur ini dapat kita temui di aplikasi Messenger milik Facebook, dan aplikasi Audio Video Downloader dari Snaptube



So pada kesempatan kali ini admin bakalan nge-share ke kalian Cara Membuat dan Memasang Night Mode di Blogger Menggunakan Cookie. Fungsi menggunakan Cookie ini sendiri adalah agar ketika sebuah laman dari blog kita di refresh mana fitur Noght Mode yang sebelumnya sudah diaktifkan tidak akan kembali ke mode awal meskipun sudah berganti laman. Selain harus dihilangkan lagi secara manual dengan menekan tombol Night Mode yang tersedia di blog teman-teman

Bagaimana, tertarik untuk mencoba memasang fitur Night Mode dalam blog temen-temen. Silahkan simak tutorial yang admin sajikan dibawah ini:

#1 Pertama-tama buka blogger > Klik menu Tema, lalu klik tombol Edit HTML > Salin dan Paste script dibawah ini tepat diatas atau sebelum tag penutup


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

#2 Selanjutnya Salin dan Paste Script ini tepat diatas atau sebelum tag penutup


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

#3 Perhatikan kode yang ditandai diatas. Kode tersebut merupakan contoh kode yang dapat teman-teman edit/mengganti .class-baru dengan class atau ID dibagian tertentu didalam blog teman-teman, tambahkan juga .nightmode sebelum class atau ID dari bagian templatenya yang ingin teman-teman ubah pada saat Night Mode aktif. Berikut contohnya


.nightmode .header{background:#222}
.nightmode .title{color:#fff}

dst...

#4 Jika ingin merubah atau menentukan sendiri posisi tombol Night Mode edit Kode CSS berikut ini


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

Jika dirasa sudah pas dan selesai dalam posisi penempatannya, silahkan Simpan Tema dan lihat hasilnya di blog sobat. Kalian Bisa lihat demo penerapannya dibawah ini


Nah, buat teman-teman yang tertarik dan ingin mendownload template yang digunakan di link DEMO tersebut bisa mendownloadnya secara gratis melalui link download dibawah ini:


Well, demikian pembahasan terkait Cara Membuat dan Memasang Night Mode di Blogger Menggunakan Cookie pada artikel kali ini, semoga bermanfaat serta bisa menjadi referensi terbaik buat teman teman semuanya. Jangan lupa berlangganan, guna mendapatkan notifikasi terbaru secara gratis
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.margatomsio.com. Terima kasih.

LANGGANAN ARTIKEL TERBARU VIA EMAIL:

0 Response to "Cara Membuat dan Memasang Night Mode di Blogger Menggunakan Cookie"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel