Cara Pasang Fitur Dark Mode Pada Blog

Maret 07, 2023

NewsArt Story - Dark Mode pada blog memanglah sangat membuat kita merasa nyaman untuk dimata. Tidak heran banyak sekali blog membuat template mereka terdapat fitur dark mode atau mode malam. Beberapa situs besar juga ada, tetapi rata-rata situs yang sudah besar tidak menggunakan dark mode untuk website mereka, karena mereka memilih untuk menjadikan template mereka AMP blog. Sedangkan yang kita akan bahas untuk para pengguna blogspot atau blogger.

Baca Juga: Inilah Script Blog Pilihan

Untuk para blogger pastinya sudah tahu javascript untuk membuat template mereka terdapat fitur dark mode agar terkesan lebih nyaman dimata. Bagi yang belum tahu, script dark mode dan cara pasang dark mode di blog itu bagaimana ? Kalian bisa simak ulasan yang singkat dan pastinya bisa kalian terapkan di blog masing-masing.

Untuk tahap membuat dark mode pada blog. Kalian bisa copy paste javascript dark mode untuk dipasangkan di <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>

Baca Juga: Simak Seputar Dunia Blog

Setelah itu, sehabis kalian paste kan javascript dark mode tersebut, kalian jangan lupa untuk pasangkan script dark mode yang bisa kalian taruh dimana saja. Kalo mimin sih di <head>

<div class='navicon right'>
<div class='dark-link' onclick='darkMode()'><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></div>

Baca Juga: Mengenal Pengertian Template Blog

Nah, sehabis keduanya dipasang di html, untuk hasilnya bisa kalian lihat di blog ini, yang terdapat logo bulan sabit di pojok kanan. Tinggal kalian sentuh saja, otomatis akan switch ke dark mode. Oh iya, bagi kalian yang mau download dua Javascript tersebut, bisa langsung klik Link ini. Sekian dan selamat mencoba ! Salam Blogger !!