Cara Membuat Tombol Mode Gelap di Blog Begini Cara Buatnya

Cara Membuat Tombol Mode Gelap di Blog Begini Cara Buatnya

Berjumpa kembali bersama saya Duniamu38, dari banyak kasus yang sudah banyak dipertanyakan di groub-groub facebook tentang gimana kak cara ngasih mode gelap di blog, cara menambahi mode gelap di blog, cara pasang mode gelap, masih banyak lagi yang perlu dipertanyakan oleh para teman-teman di groub. Karena jika website dengan adanya mode gelap ini orang melihat itu tidak membuat silau atau sakit mata, oleh karena itu para developer mulai mengembangkan script blog  ini dengan tampilan mode gelap.

Adapun cara ini saya pelajari dari blog Arlinadzgn disitu dishare dan dijelaskan secara gamblang oleh adminnya, banyak banget tutorial tentang blog, cara pasang tombol ke atas, cara belajar seo dan cara-cara yang lain masih banyak lagi, artikel yang sangat bermanfaat menurut saya, okeh itu sedikit prolog dari saya.

Oke langsung saja sobat-sobat yang baik hatinya

Caranya sebagai berikut :

Pertama silahkan kalian Klik Menu Thema > Setelah klik Edit Html > selanjutnya Tempel script dibawah ini tepat sebelum </body> atau diatasnya script ini </body>  pada template blog sobat.

Berikut scriptnya :

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

Langkah Selanjutnya silahkan Tempel kode html dibawah ini sebelum kode </head> di blog sobat

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

Catatan Penting !!

Berikut adalah catatan penting mengenai Class / Id sesuai Template Sobat. Jadi kalian silahkan ganti Class atau id didalam template sobat, jika di template sobat memakai Class atau id contoh seperti ini

Berikut Scriptnya (Warna Merah script diatas sebelum head itu) :

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

Selanjutkan Ganti Juga Kode css dibawah ini yang ada didalam script awal itu untuk menentukan posisi letak Tombol Night Mode tersebut :

Berikut Kode Scriptnya (Warna Biru diatas kode sebelum head itu)

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

Oke sobat langkah terakhir silahkan kalian Save Templat sobat dan liat hasilnya . jangan lupa share jika artikel ini dirasa bermanfaat dan work. Terimakasih