CARA MUDAH MEMASANG TOMBOL TOGGLE DARK MODE KE TEMPLATE BLOGGER

AvatarOleh:
Toggle artinya tombol pengalihan mengalihkan suatu bentuk ke bentuk 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.
Dark illustration
Dark illustration 
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 saya 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.
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.

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

Selamat belajar, saya 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, saya Anissa dengan senang hati akan menjawabnya, menjawab pertanyaan itu berpahala lho..

4 Responses to "CARA MUDAH MEMASANG TOMBOL TOGGLE DARK MODE KE TEMPLATE BLOGGER "

  1. I am learning something new.
    Thanks.

    ReplyDelete
  2. keren semakin suka coding deh..kalau gak tau larinya ke blog ini

    ReplyDelete
  3. Tanya dunk..., ini kasi tutorial seperti ini tapi blog ini kuq ndak makai dark mode ya? ada alasan tertentu kah?

    ReplyDelete
    Replies
    1. Tidak memasang Dark mode Karena tidak suka warna gelap. Tentu Saja bisa diganti dengan warna merah, hijau, biru indigo dll.

      Tapi nanti di protes lagi kok namanya Dark mode? hihihi

      Delete

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

BERDASARKAN LABEL

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel