Cara Membuat Modus Malam (Night Mode) pada Blog
Nyampling << N >> ~ Cara Membuat Modus Malam (Night Mode) pada Blog. Bagi kalian para pembaca blog tentu sudah tidak asing lagi dengan fitur ini, sudah banyak aplikasi memakai fitur ini. Bukan hanya aplikasi, sekarangpun fitur ini bisa diterapkan pada sebuah blog atau website. Sehingga akan menambah nilai keunikan blog kita, sebelum kelangkah berikutnya ada baiknya kita harus tauh dulu apa itu fitur Modus Malam atau Night Mode.
Modus malam atau sering disebut Night Mode adalah sebuah fitur yang dapat mengubah tampilan blog. Hal ini diperuntukkan bagi pembaca blog pada malam hari sehingga tingkat kecerahan dan warna tidak terlalu mencolok. Fitur mode malam ini diharapkan dapat mengurangi tingkat kelelahan mata pada saat membaca artikel blog.
Untuk tutorial cara membuat modus malam atau night mode pada halaman blog dapat anda terapkan sesuai langkah - langkah seperti dibawah ini, yuk, simak.
Langkah 1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
Langkah 2. Copy kode CSS dan Query dibawah ini, letakkan diatas kode </body>
Langkah 3. Copy kode HTML dibawah ini, letakkan di tempat yang kalian inginkan (peletakan kode bebas sesuai selera bisa diheader </head> atau di atau di <body>)
Langkah 4. Simpan template
Pastikan bahwa template kalian sudah terpasang kode Jquery seperti dibawah ini (gunakan ver. 3.3.1 atau versi diatasnya):
Script By Kurazone
Demikianlah Tutorial Cara Membuat Modus Malam atau Night Mode pada halaman blog, semoga dapat bermanfaat. Dan dapat menambah nilai keunikan pada blog anda, untuk saran dan kritik bisa ditambahkan dikolom komentar ya guys.
Modus malam atau sering disebut Night Mode adalah sebuah fitur yang dapat mengubah tampilan blog. Hal ini diperuntukkan bagi pembaca blog pada malam hari sehingga tingkat kecerahan dan warna tidak terlalu mencolok. Fitur mode malam ini diharapkan dapat mengurangi tingkat kelelahan mata pada saat membaca artikel blog.
Cara Membuat Modus Malam (Night Mode) pada Blog
Untuk tutorial cara membuat modus malam atau night mode pada halaman blog dapat anda terapkan sesuai langkah - langkah seperti dibawah ini, yuk, simak.
Langkah 1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
Langkah 2. Copy kode CSS dan Query dibawah ini, letakkan diatas kode </body>
<style>
/* Toggle Night Mode Kurapetang */
.Switchbtn{text-align:center;display:inline-block;align-items:center;margin-top:3px;padding:9px}
.tgl2{display:none;}
.tgl2 + .tgl2-btn{outline:0;display:inline-block;width:40px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.tgl2 + .tgl2-btn:after,.tgl2 + .tgl2-btn:before{position:relative;display:block;content:"";width:50%;height:100%;}
.tgl2-switch + .tgl2-btn{background:#D0D0D0;border-radius:100px;transition:all .4s ease;}
.tgl2-switch + .tgl2-btn:after{content:"\f185";font-family:fontawesome;border-radius:100px;background:#979797;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 4px 0 rgba(0,0,0,0.08);position:absolute;width:20px;height:20px;top:-5px;left:0;}
.tgl2-switch:checked + .tgl2-btn{background:#205A95;}
.tgl2:checked + .tgl2-btn:after{left:50%;background:#123456;content:"\f186";font-family:fontawesome}
.Kurapetang {background:#0c0a0a !important}
.Kurapetang .post {background:#0c0a0a !important}
.Kurapetang .post-body {color:white !important}
.Kurapetang .post-title{color:white !important}
.Kurapetang .classbaru{}
.Kurapetang .classbaru{}
</style>
<script>//<![CDATA[
$("#Kurapetang").click(function(){
$("body").toggleClass('Kurapetang');
});
//]]></script>Langkah 3. Copy kode HTML dibawah ini, letakkan di tempat yang kalian inginkan (peletakan kode bebas sesuai selera bisa diheader </head> atau di atau di <body>)
<div class='Switchbtn' style='float:right;background:#1e1e20'>
<span style='font-size:8px'><i>Modus malam</i></span> <input class='tgl2 tgl2-switch' id='Kurapetang' type='checkbox'/>
<label class='tgl2-btn' for='Kurapetang'/></div>Langkah 4. Simpan template
Note
- Ubah float:right menjadi float:left apabila kalian ingin meletakkan tombol nya berada dibagian kiri
- Keterangan .Kurapetang .classbaru {} adalah untuk menambah bagian yang ingin dijadikan warna gelap. Silahkan ganti .classbaru {} nya menjadi nama selektor yang kalian ingin ubah warnanya. Contoh, jika ingin membuat HEADER dan SIDEBARNYA menjadi gelap, maka >> .Kurapetang .header{background:black} atau .Kurapetang .sidebar {background:black}. Jangan lupa untuk menambahkan color:white agar teks yang berada pada area gelap menjadi warna putih >> .Kurapetang .sidebar{background:black;color:white}
Pastikan bahwa template kalian sudah terpasang kode Jquery seperti dibawah ini (gunakan ver. 3.3.1 atau versi diatasnya):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>Script By Kurazone
Demikianlah Tutorial Cara Membuat Modus Malam atau Night Mode pada halaman blog, semoga dapat bermanfaat. Dan dapat menambah nilai keunikan pada blog anda, untuk saran dan kritik bisa ditambahkan dikolom komentar ya guys.
