EDITBLOGTEMA

Kebijakan Download
×
Skip to main content

CARA MUDAH MEMASANG TOMBOL TOGGLE DARK MODE KE TEMPLATE BLOGGER

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.

Atau: DEMO 2

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

Comments

  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

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Copyright © EDITBLOGTEMA. All rights reserved.