Cara Mudah Membuat Fitur Mode Malam atau Dark Mode di Blog
09 Oktober 2019
Tambah Komentar
Daftar Isi [Tampilkan]
Pada panduan blogspot kali ini blog Andrie Kristianto akan membuat mode malam yang mirip-mirip pada kehidupan sehari-hari, jadi nanti mode malam ini akan otomatis berubah atau berganti sendiri. Seperti halnya jika hari menjelang malam di kehidupan nyata maka blog akan menjadi gelap, dan jika hari menjelang siang maka blog menjadi terang.
Tidak hanya otomatis saja, pada panduan blogspot untuk membuaat fitur mode malam ini juga dilengkapi dengan tombol toogle yang bisa digunakan dengan meng- klik tombol yang tersedia. Tombol ini bisa Anda letakkan sesuai dengan keinginan kalian, untuk lebih jelasnya bisa melihat panduan tutorial pada artikel dibawah ini.
Cara Membuat Fitur Mode Malam atau Dark Mode atau Mode Gelap di Blog
Untuk membuat fitur mode malam atau dark mode ini sebelumnya Anda harus sudah login dulu ke akun blogger yang Anda miliki dan ingin Anda beri fitur ini. Setelah itu pilih menu Tema/Theme di Dashboard Blogger Anda.
Masukkan kode dibawah ini tepat diatas kode <body>
<style>
.dark-mode{width:66px}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:''}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
</style>
<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('43085dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('43085dark','false')}}function dark(){localStorage.getItem('43085dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('43085auto')=='true'){auto()}else{localStorage.getItem('43085dark')==null?auto():dark()}function toggle(){localStorage.setItem('43085auto',localStorage.getItem('43085auto')=='true'?'false':'true');localStorage.getItem('43085auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('43085auto');localStorage.setItem('43085dark',localStorage.getItem('43085dark')=='true'?'false':'true');dark()}
//]]>
</script>Setelah meletakkan kode tersebut, langkah selanjutnya yaitu meletakkan tombol toogle. Peletakkan tombol toogle mode gelap ini bebas ingin diletakkan dimana sesuai dengan keinginan Anda. Ingin diletakkan setelah menu, atau di sidebar-post, atau di footer, dan lain sebagainya.
Kodenya:
<div class='dark-mode'>
<button class='toggle' onclick='toggle()' type='button'/>
<button class='mode' onclick='mode()' type='button'/>
</div>Nah pada langkah terakhir ini merupakan langkah yang paling memakan waktu, karena kita akan mendeklarasikan bagian-bagian mana saja yang ingin kita beri mode gelap, apakah bagian post-body saja atau bagian footer saja atau bagian sidebar saja.
Merancang antarmuka blog/website menjadi mode gelap ini memang dilakukan satu-satu, karena setiap bagian dari template blog ini terpisah-pisah, seperti sidebar, footer, body, dan lain sebagainya. Contoh saja kodenya seperti ini:
.header{background-color:#fff;color:#222;}Kemudikan kita akan mendeklarasikan mode gelap pada tambilan header dengan warna dan background yang berlawanan seperti berikut:
.header{background-color:#fff;color:#222;} /* ini kode default */
.dark .header{background-color:#444;/color:#eee;}Setelah berhasil implementasi berhasil, blog/website yang Anda miliki memiliki 2 antarmuka yaitu mode terang dan mode malam yang bisa dilakukan secara manual maupun otomatis berubah saat hari menjelang malam pada kehidupan nyata dan kembali terang setelah hari menjelang siang.Semoga artikel Cara Membuat Fitur Mode Malam atau Dark Mode di Blog ini bisa bermanfaat. Sampai bertemu di tutorial selanjutnya.
Belum ada Komentar untuk "Cara Mudah Membuat Fitur Mode Malam atau Dark Mode di Blog"
Posting Komentar