Cara Membuat Mode Siang Malam (Night Mode) Di Blog

Diposting pada
Membuat Mode Gelap Terang Di Blogspot

Membuat night mode atau mode gelap untuk blog – Pernah tidak sih kamu melihat blog yang ada tombol night modenya? tombol itu ketika ditekan atau diklik maka background dari website itu menjadi gelap serta tulisannya berubah menjadi putih.

Bila kamu mampir ke artikel amtread ini, otomatis kamu ingin blog kamu mempunyai fitur tombol siang malam (night mode) ketika ditekan. Cara kerja tombol itu gampang, bila ditekan sekali maka blog kamu menjadi mode malam dan bila ditekan lagi maka blog kamu menjadi mode siang kembali dan begitupun seterusnya sampe viewer kamu bosan hehe.
Kenapa sih ada beberapa blog yang membuat tombol night mode ini? emang ada untungnya? Pasti ada untungnya dong baik dari segi viewer ataupun pemilik blog itu sendiri. Lalu apa saja keuntungan dari adanya night mode ini? Cek di bawah ini.

Keuntungan Dari Night Mode di Blog

  1. Membuat mata viewer tidak sakit bila berlama-lama membaca.
  2. Membuat blog terlihat lebih elegan.
  3. Membuat blog kamu terlihat lebih interaktif terhadap pembaca.
  4. Meningkatkan RPM (Read Per Minute) artikel kamu.
  5. Dll.
Setelah tahu keuntungannya, mari langsung saja kita membuat night mode di blog dengan platform blogger.com ini. Simak di bawah bawah ini.

Baca juga: Cara Membuat Halaman Partner Seperti Amtread

Jquery

Pastikan template kamu mempunyai kode JQuery seperti di bawah ini. Kalau belum punya, silahkan pasang saja sebelum kode </body>.
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js’></script>

CSS

Setelah kode JQuery terpasang, selanjutnya kamu pasang saja kode CSS dan JS di bawah ini diantara kode <style> </style>.
<style>
/* Night Mode From Amtread And Kurazone */
.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}
.amtread{background:#0c0a0a !important}
.amtread .post {background:#0c0a0a !important}
.amtread .post-body {color:white !important}
.amtread .post-title{color:white !important}
.amtread .tambah-class{}
.amtread .tambah-class{}
</style>
<script>//<![CDATA[
$(“#amtread”).click(function(){
$(“body”).toggleClass(‘amtread’);
});
//]]></script>

HTML

Langkah terakhir kamu tinggal menambahkan kode HTML di tempat yang kamu inginkan (bebas).
<div class=’Switchbtn’ style=’float:right;background:#1e1e20′>
<span style=’font-size:8px’><i>Modus malam</i></span> <input class=’tgl2 tgl2-switch’ id=’amtread’ type=’checkbox’/>
<label class=’tgl2-btn’ for=’amtread’/></div>

Baca juga: Cara Agar Artikel Blog Tidak Bisa Dicopy Paste

Sekian artikel dari amtread.com mengenai cara membuat tombol gelap terang (night mode) di blog dengan platform blogger.com. Kalau ada yang ingin ditanyakan silahkan hubungi saya melalui kontak ya. Jangan lupa untuk komentar juga hehe.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *