Cara memasang tombol Toggle "dark mode" khusus ke navigasi template blogger

Trik ini adalah untuk membuat blog menjadi memiliki opsi "Dark Mode".

Baiklah mari kita mulai memasangnya:
Temukan kode deklarasi pembuatan navigasi menu template sobat terlebih dahulu, misalnya pada template buatan editblogtema kode navigasinya adalah sebagai berikut:

<style>
#editblogmenu{width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#3366FF;}
#editblogmenu ul,#editblogmenu li{margin:0;padding:0;list-style:none;}
#editblogmenu ul{height:45px}
#editblogmenu li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
...dst...dst...</style>

Perhatikan kode yang saya sorot warna kuning itu akan kita jadikan sebagai penghubung ke tombol pengalih (toggle) yang akan kita buat dan tentu saja setiap template memiliki kode, sintaks dan deklarasi kode kode yang berbeda dalam pembuatan menu navigasinya, sobat tinggal menemukannya saja nanti.

Jadi masuk kepengaturan blog:
1. PASANG CSS STYLE

1. Pilih tema
2. Pilih edit HTML
3. Pada kotak editor HTML blogger yang telah terbuka cari kode </head> dan letakan kode berikut dibawahnya:

<style>.dark-mode{width:66px}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:&#39;&#39;}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
#editblogmenu {background-color:#1E90FF;color:#222;} /* ini kode default */
.dark #editblogmenu{background:-webkit-linear-gradient(right,#FF1493 30%,#1E90FF 65%);/color:#000;}
</style>

Perhatikan kode #editblogtema sedangkan kode didalam kurung {background:-webkit-linear-gradient(right,#FF1493 30%,#1E90FF 65%);/color:#000;} adalah kode warna gradient yang saya buat untuk mengalihkan warna bar navigasi diatas header blog agar menjadi berwana gradient. Semua untaian kode diatas hanyalah CSS style pembentuk.

2. PASANG JavaScript:
Langkah selanjutnya adalah masih dalam pengaturan editor HTML, cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:

<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('43085dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('43085dark','false')}}function dark(){localStorage.getItem('43085dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('43085auto')=='true'){auto()}else{localStorage.getItem('43085dark')==null?auto():dark()}function toggle(){localStorage.setItem('43085auto',localStorage.getItem('43085auto')=='true'?'false':'true');localStorage.getItem('43085auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('43085auto');localStorage.setItem('43085dark',localStorage.getItem('43085dark')=='true'?'false':'true');dark()}
//]]>
</script>

3. PASANG HTML
Setelah kode JavaScript terpasang, kini tinggal memasang kode HTML pembentuk tombol Togglenya, cari kode </header> tepat diatasnya akan terlihat kode berikut:

       <nav role='navigation'>
</nav>
</div>
</div>
</header>

Letakan kode berikut tepat dibawah kode <nav role='navigation'>

<div class='dark-mode'>
Klik:
<button class='mode' onclick='mode()' type='button'/>
</div>

Jadi akan terlihat seperti berikut:

 <nav role='navigation'>
<div class='dark-mode'>
Klik:
<button class='mode' onclick='mode()' type='button'/>
</div>Klik:<button class='mode' onclick='mode()' type='button'/></div></nav>
</div>
</div>
</header>

Lalu Save template.

www.editblogtema.net

SHARE YA: