Cara Membuat Blogger Mode Siang dan Malam (Night Mode)

By | February 17, 2020

MasblogerCara Membuat Blogger Mode Siang dan Malam (Night Mode) – 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.

Baca Juga : Daftar Bos Teknologi Paling Kaya Yang Berasal Dari Negara China

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? Langsung Saja 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.

Jquery

Pastikan template kamu mempunyai kode JQuery seperti di bawah ini. Kalau belum punya, silahkan pasang saja sebelum kode </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=’amtread’ type=’checkbox’/>
<label class=’tgl2-btn’ for=’amtread’/></div>

CSS

Setelah kode JQuery terpasang, selanjutnya kamu pasang saja kode CSS dan JS di bawah ini diantara kode <style> </style>.

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

Sumber : Amtread