Cara Membuat Fitur Mode Malam atau Dark Mode di Blog - Andrie Kristianto
News Update
Loading...

Tuesday, July 9, 2019

Cara Membuat Fitur Mode Malam atau Dark Mode di Blog

Blog Andrie Kristianto - Cara Membuat Fitur Mode Malam atau Dark Mode di Blog. Mode malam atau dark mode atau night mode atau modus malam atau mode gelap atau istilah-istilah mode lainnya ini merupakan salah satu fitur yang bisa dibuat di blog dan bisa mengubah tampilan template menjadi gelap. Prinsip mode gelap seperti ini sudah banyak sekali digunakan oleh banyak platform, seperti facebook, whatsapp, youtube, twitter, chrome, dan website-website lainnya.

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.

Share with your friends

10 comments

  1. Bisa di coba ini, terimakasih ya kak informasinya, terus berkarya dan berbagi ilmu

    ReplyDelete
  2. Saya paling nggak bisa kalau harus ngedit tema, takut salah....
    Jadi jarang banget buka tema kalau nggak nekad perlu banget.

    Takut kok sama tema..

    ReplyDelete
  3. So useful but I'm afraid to try it out hahaha, takut semua kodenya berantakan, trus bingung mana yang diperbaiki. Akhirnya malah kudu install tema dari awal lagi wkwk.

    Tapi ini bakal keren banget sih kalo sukses diaplikasikan ke blog karena bikin mata nyaman kalo baca gelap-gelapan (ga baik sih, kesian matanya wkwk).

    ReplyDelete
    Replies
    1. Wueheheh iyaa kalo gelap ga bagus, tapi kalau dalam kondisi terang malah bagus, jadi mata gak capek karena cahaya yang terlalu banyak :D

      Delete
  4. Untuk blog pribadi saya kurang suka mode molam, kesannya suram aja. Tapi kayanya asik aja ya, bisa berubah otomatis begitu. Sayang saya kurang mahir main edit html, apalagi jika tetlalu banyak yang diotak-atik.

    ReplyDelete
  5. Terlihat simpel, tinggal copas, tapi ketika html diaktifkan, langsung seketika pusing wkwkwkwk
    Coba ganti-ganti tidak berubah #gagal
    Lain waktu coba lagi ah

    ReplyDelete

How To Use
  • Put the link on the
  • Generate Link box with http:// or https://
  • Use  CTRL + V  on keyboard to put the link.
  • Click Generate button to get encrypted link.
  • Click Copy URL button.
  • Done