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>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.
#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:'trebuchet MS';font-size:16px;
...dst...dst...</style>
Jadi masuk kepengaturan blog:
1. PASANG CSS STYLE
- Pilih tema
- Pilih edit HTML
- Pada kotak editor HTML blogger yang telah terbuka cari kode </head> dan letakan kode berikut dibawahnya:
<style>.dark-mode{width:66px}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.
.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:''}
.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>
2. PASANG JavaScript:
Langkah selanjutnya adalah masih dalam pengaturan editor HTML, cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
<script>3. PASANG HTML
//<![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>
Setelah kode JavaScript terpasang, kini tinggal memasang kode HTML pembentuk tombol Togglenya, cari kode </header> tepat diatasnya akan terlihat kode berikut:
<nav role='navigation'>Letakan kode berikut tepat dibawah kode <nav role='navigation'>
</nav>
</div>
</div>
</header>
<div class='dark-mode'>Jadi akan terlihat seperti berikut:
Klik:
<button class='mode' onclick='mode()' type='button'/>
</div>
<nav role='navigation'>Lalu Save template.
<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>
www.editblogtema.net