Cara gampang memasang tombol toggle dark mode ke dalam template blogger

Toggle artinya tombol pengalihan mengalihkan suatu bentuk ke bentuk lain atau, dari satu tampilan ke tampilan lain. Toggle dark mode berarti mengalihkan dari terang kepada gelap. Banyak yang memasangnya contohnya template igniel.com milik mbak igniel memiliki opsi dark mode. Dark mode berguna untuk membaca di tempat gelap atau terlalu terang. Dan menyehatkan mata.

Tetapi yang paling penting adalah kalian bisa menerapkan ini dengan sangat mudah ke template template blogger terbaru blogger seperti Contempo. Namun, jangan salah panduan yang kami berikan ini hanyalah contoh ya....

Syarat pertama kalian belum memasang navigasi menu custom karena dia bisa membuat posisi navigasi jadi kacau, kecuali jika kalian mengerti mengatur posisinya melalui kode CSS.

Dan syarat kedua tentu saja harus masuk ke dasbor blogger.

• Klik custom
• Pilih background, lalu hapus background
• Lalu pilih advance pilih satu persatu menu dan pada setiap ada kata background, pilih atau centang: transparent.
• Save tema.

See the Pen abmXMax by Sufyan Yaan (@sufyan-yaan) on CodePen.

Kode kodenya sangat sederhana dan singkat, kalian tidak perlu terlalu pusing melihatnya.

Sekarang pilih back to blogger, lalu pilih theme, pilih edit HTML. Cari kode: </head> dan letakan kode di bawah ini tepat di atas </head>:

<style>
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>

Lalu cari masih pada pilihan edit HTML cari kode </body> dan copy kode berikut dan letakan dibawah kode </body> tadi:

<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>

Selanjutnya masih di dalam opsi edit HTML cari kode </header> di atas kode tersebut cari kode </nav> dan letakan kode berikut dibawah tepat diatas kode </nav> tadi:

<button onclick='myFunction()'>Toggle dark mode</button>

Save tema.

Silahkan kunjungi link halaman Demo yang telah dibuatkan oleh admin editblogtema hanya sebagai contoh kasar saja. Klik Demo di bawah dan tekan "pindah ke mode gelap" pada header halaman tersebut.

DEMO

Jangan kuatir kami menerapkan menerapkannya pada template terbaru: SOHO dan Notable.

Selamat belajar, Kami doakan teman teman cepat sukses dan memiliki bekal ketrampilan atau ilmu yang berguna...

Supaya kalian lebih mudah dalam mempelajari dan menerapkannya kalian harus, bertanya terkait artikel ini jika kurang mengerti, silahkan bertanya melalui kotak komentar, Aku Anissa dengan senang hati akan menjawabnya, menjawab pertanyaan itu berpahala lho..