GagakTekno

Cara Membuat Switch Night Mode di Blog

Night Mode atau yang bisa disebut dengan mode malam ini memang cukup bagus sekali untuk blog menurut saya terutama bila ada seorang pengunjung yang sedang mengunjungi blog sobat dimalam hari dan keadaan template yang putih tentu saja dapat membuat mata pengunjung merasa sakit berbeda dengan menambahkan Night Mode yang dapat membuat pengunjung untuk mengaktifkan mode tersebut untuk membaca dimalam hari.

Lantas apa kegunaan dari Night Mode ? Untuk menurunkan/mengurangi jumlah cahaya biru yang dipancarkan oleh gadget seperti smartphones dan komputer. Ini sangat berguna sekali untuk mata kita karena tidak akan dibuat merasa sakit dengan Night Mode kita akan bisa berselancar di malam hari tanpa membuat mata menjadi sakit.

Jikapun kita tidak memasang Night Mode diblog yang kita gunakan sebenarnya itu tidak apa-apa karena browser yang sering dipakai pasti sudah menyediakan fitur Night Mode pada smartphone dan pada komputer tentu saja ada plugin meski begitu kita bisa menambahkan fitur ini untuk pengunjung yang masih awam.

Bagi sobat yang ingin mencoba Night Mode ini bisa langsung ke Tutorial yang akan saya berikan dengan memainkan CSS dan Javascript saja dan ini terbilang sangat mudah bila sobat memahami logika yang akan saya berikan ini.

Cara Membuat Swtich Night Mode di Blog

1. Masuk ke blog sobat terlebih dahulu

2. Klik Tema > Edit HTML

3. Tambahkan kode dibawah ini seterah sesuai sobat mau diletakkan dimana juga

<div class='Switch'>
<input class='tgl tgl-switch' id='Night' type='checkbox'/>
<label class='tgl-btn' for='Night'/>
</div>

4. Tambahkan kode javascript dibawah ini diatas kode </body>

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

5. Tambahkan kode css dibawah ini dan letakkan tepat diatas </b:skin> or </style>

/* Toggle Night Mode */
.Switch{text-align:center;display:inline-block;align-items:center;margin:13px 15px 0 0;padding:0;color:#fff;}
.tgl{display:none;}
.tgl + .tgl-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;}
.tgl + .tgl-btn:after,.tgl + .tgl-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%;}
.tgl:checked + .tgl-btn:after{left:50%;background:#2196f3;}
.tgl-switch + .tgl-btn{background:#2196f3;border-radius:100px;transition:all .4s ease;}
.tgl-switch + .tgl-btn:after{border-radius:100px;background:#fff;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;}
.tgl-switch:checked + .tgl-btn{background:#1f253d;}
.Night{background:#f0f0f0;}

6. Simpan Tema dan lihat hasilnya

Untuk menambahkan tampilan yang ingin dibuat Night Mode bisa tambahkan pada bagian CSSnya seperti ini :

.Night div {background:#ddd} // div adalah kode yang akan diubah menjadi hitam
.Night p {color:#000} // p atau paraghraf akan berubah warna menjadi hitam

Contoh penambahan kode diatas saya tandai dengan warna merah, sobat bisa menambahkan kode css yang apa saja yang akan dibuat menjadi Night Mode tergantung sobat sendiri.

Bagi sobat yang ingin melihat Demo nya bisa klik berikut : Demo

Mungkin sekian untuk Tutorial saat ini dan juga jangan lupa untuk share bila bermanfaat yah sob :D
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR