Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Cara Membuat Dark Mode di Blog / Web

Cara mudah membuat Dark Mode atau Mode Malam di Blog

Cara membuat Dark Mode / Mode malam di Blog - Saat ini banyak web / blog yang menggunakan Dark Mode (mode malam), tentunya ini akan sangat berguna bagi pembaca yang tidak suka dengan mode terang yang menyilaukan mata. Pada tutorial kali ini saya akan menjelaskan step-by-step cara membuat Dark Mode pada Blog


Banyak tutorial yang sudah membagikan cara membuat Dark Mode ini, tapi saya liat asal share. Padahal susunan template / theme tentunya berbeda. Dan apabila Anda langsung terapkan, saya yakin blog anda akan acak-acakan dan ga jelas. Makanya, disini saya tidak memberikan tutorial yang langsung copas, tapi memberikan pemahaman bagaimana cara penerapan pada setiap template/theme.

Syarat Membuat Blog Dark Mode

1. Bukan berbasic AMP HTML (karena tidak memperbolehkan penggunaan script di luar AMP Developer
2. Harus memahami struktur Template
3. Harus memahami kode CSS baik id atau class

Belajar Memahami Dark Mode pada Blog

1. Memahami CSS standar

Untuk pembelajaran, saya mempunyai CSS dan HTML standar. CSSnya seperti ini :

body {border: 0;font-family: Arial, sans-serif;font-size: 14px;font-weight: normal;margin: 0;outline: 0;padding: 0;background:#e5e5e5;}
#main-wrapper {max-width:960px;background:#fff;margin:30px auto}
header {color:#333;text-align:center;padding:30px}
header h1 {font-size:36px}
.menu {background:#d9d9f4;text-align:left;padding:2px 30px}
.menu p {font-weight:bold}
article {background:#fff;color:#777;padding:30px;text-align:left;font-size:14px; font-weight:normal}
article h2 {color:#111}
footer {background:#9696be;color:#fff;padding:20px;text-align:center}
footer a {color:#f3f3f9;text-decoration:none}
footer a:hover {color:#333}
<div id="main-wrapper">
  <header>
	<h1>Blog Header</h1>
  </header>
  <div class="menu"><p>MENU</p></div>
  <article>
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </article>
  <footer>
  <a href="https://kang-ismet.com">Kang Ismet</a> All Right Reserved
  </footer>
</div> 
Sehingga hasilnya seperti pada DEMO (masih biasa, belum ada mode gelap) Lihat Demo

2. Menambahkan JavaScript dan Icon

Simpan JavaScript ini di atas </body>
<script>
//<![CDATA[
function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainContent").classList.add("dark-mode"):document.querySelector("#mainContent").classList.remove("dark-mode")};
(localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('#mainContent').classList.add('dark-mode') : document.querySelector('#mainContent').classList.remove('dark-mode') 
//]]>
</script> 
Kemudian simpan icon di mana saja terserah penempatannya. Sebagai contoh saya simpan di menu :
<div class='dark-link' onclick='darkMode()'>
  <span class="dark">Dark Mode</span><svg class='line svg-1' data-text='Dark mode' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>
  <span class="light">Light Mode</span> <svg class='line svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg>
</div>
ini CSS untuk pengaturan Tombol. Karena tombol saya buat absolute maka di menu harus ditambah position:relative (silahkan dipelajari Memahami CSS Position Property dan Valuenya)
/* Icon Dark Mode */
.dark-switch, .dark-link {position:absolute;top:15px;right:30px;width:20px;height:20px;z-index:10;cursor:pointer}  
.dark-link .svg-2, .dark-mode .dark-link .svg-1{display:none}
.dark-mode .dark-link .svg-2{display:block;}
.dark-mode .dark-link svg.line{fill:none;stroke:#eaff00}  

/* Teks Dark Mode */
.dark {position:absolute;  min-width:60px;top:5px;right:25px;font-family:Arial;font-size:11px;color:#333}
.light {position:absolute; min-width:60px;top:5px;right:25px;font-family:Arial;font-size:11px;color:#ccc;display:none}
.dark-mode .dark {display:none}
.dark-mode .light {display:block}
maka hasil sementara, ada icon dan masih belum mempengaruhi tampilan blog. Lihat Demo

Menambah CSS .dark-mode

Setelah selesai dengan tombol dan JavaScript, maka langkah pertama adalah menambah id="mainContent" pada <body>, sehingga menjadi seperti ini :
<body id="mainContent">
Kemudian tambahkan .dark-mode pada class atau id yang ingin di rubah. Sehingga dari CSS awal yang kita buat, hasil penambahannya seperti ini:
/* Layout Blog Mode Dark */
body.dark-mode {background:#111}
.dark-mode header{background:#909090;color:#fff}
.dark-mode .menu{background:#646464;color:#fff}
.dark-mode article{background:#7c7a7a;color:#fff}
.dark-mode article h2{color:#f5f5f5}
.dark-mode footer{background:#333}
.dark-mode footer a{color:#f8eda2}
.dark-mode footer a:hover{color:#fefefe}
Hasil Akhir

Apabila masih bingung, silahkan ditanyakan di kolom komentar...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

23 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Sayang di amp belum ada untuk cache nya ya kang.
    1. wah kalau udah ada, pasti dimainkan kang hehe
  2. kang cara mengatasi error amp dengan pesan "Usage of the !important CSS qualifier is not allowed." gimana ya
    1. pada AMP HTML tidak diperbolehkan CSS menggunakan !important, hapus semuanya
    2. kalo di hapus kira kira gak ada efek samping?
    3. kalau ada dua css, yang important didahulukan... pasti akan pengaruh kalau ada CSS bentrok, hapus semua, kalau ada yang error cek 1 per 1
  3. mantap nih templatnya kang
    1. alhamdulillah.. terus diacak2 aja biar ga bosen hehe
  4. Ulasannya lengkap muda dipahami
    1. makasih sob..
  5. Mantap sekali kang, menambah wawasan..!
    Oh ya kang, kalau bisa saya mau reques, cara mempersingkat jumlah karakter kata pada judul artikel, seperti di blog ini biar kelihatan rapi, terima kasih kang.
    1. Silahkan sob, sudah saya buat..
      https://www.kang-ismet.com/2021/04/cara-memotong-kata-karakter-pada-judul.html
    2. Siap kang, terima kasih, sangat membantu sekali!
  6. Keren banget templatenya kang, mau tanya aja ini, ini kalau posting akang harus support amp atau nggak yah di blog akang ini..?
    1. Karena amp ready maka tetep dengan aturan AMP nya Mas..
  7. Kang cara madukan amp dan non amp gmna kang. Seperti template nya Abang?
    1. Silahkan lihat link ini :
      https://www.kang-ismet.com/2021/04/membuat-blog-menjadi-dua-tampilan-amp.html
  8. kok punya saya cachenya ga berfungsi ya kang
    1. coba URLnya mana saya lihat?
    2. https://rebozasambirejo.blogspot.com/
    3. ganti JSnya dengan ini
      function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#superWrapper").classList.add("dark-mode"):document.querySelector("#superWrapper").classList.remove("dark-mode")};
      (localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('#superWrapper').classList.add('dark-mode') : document.querySelector('#superWrapper').classList.remove('dark-mode');
    4. bisa bisanya lupa saya ganti selectornya hehe
      makasih banyak kang
    5. hehe kenapa ya
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.