07 September 2022

Tutorial Membuat Fitur Dark Mode Keren di Blog Secara Mudah

بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Membuat Fitur Dark Mode Keren di Blog

DARK MODE fitur tersebut atau Mode Gelap adalah keadaan dimana tampilan atau display dari sebuah obyek menjadi gelap. Tidak seperti yang biasa terjadi pada tampilan terang pada sebuah obyek. Kalau dalam blog itu ada ikon bulan dan mentari biasanya, dan ketika ikon bulan diklik maka halaman display blog akan menjadi hitam gelap mulai dari header hingga bawah yaitu footer.Maka dari itu mode ini disebut Dark Mode.

Dark Mode sendiri dibuat untuk melindungi radiasi layar yang sampai ke mata. Sehingga dengan fitur ini, mata yang sedang melihat obyek tidak cepat merasa lelah terutama pada malam hari. Karena sinar radiasi dari komputer, laptop dan HP sungguh bisa merusak keadaan mata bila dalam keadaan sangat terang. Sehingga dibuatlah mode ini, Dark Mode. Keren sih buat blog yang ada mode seperti ini di tampilan display blognya.

Tentu saja hal ini juga terjadi tidak hanya layar HP yang mendukung fitur Dark Mode ini lho ya. Tapi juga pada website juga terdapat fitur yang sudah menjamur di era sekarang ini. Hampir sebagian besar pembuat template sudah membuatkan mode gelap pada tampilan templatenya. Sehingga semakin stylis kalau dibilang. Semakin keren gitu dilihat.



Keberadaan fitur ini pada website beraneka ragam bentuk buttonnya. Dan bahkan pada beberapa website menerapkan fitur Dark Mode dengan variasi bintang berkelip, sehingga menyerupai remang cahaya malam berbintang. Dengan utak-atik sedikit CSS yang ada pada property Dark Mode, maka trik ini dapat diterapkan ya teman-teman.

Pada fitur ini, pada template web atau blog yang dipasangi ini adalah before afternya telah diubah sedemikian rupa untuk memunculkan dengan baik dan pas di view halaman blog. Tentu saja utak-atik HTML template wajib disini. Point utama dari kalian, yaitu kalian harus mampu memahami isi template dengan baik bila ingin blog kalian lebih kece. Soalnya dengan pemahaman template, kalian bisa rias sesuka hati tampilan blog kalian sesuai keinginan kalian sendiri.

Dengan toggle yang terdapat dua simbol, gelap dan terang (bulan sabit, red), button ini biasanya terpampang pada sisi kanan atas pada sebuah website atau blog. Space kosong ini sering diisi dengan button Dark Mode atau biasanya diisi dengan Search Page/Halaman Pencarian.

Okelah, kita mulai saja tutorial malam ini. Langsung saja ya

Membuat Fitur Dark Mode Keren di Blog


1. Masuk ke Dashboard Blogger
2. Klik Tema terus pilih Sesuaikan : Edit HTML
3. Setelah masuk ke Template kemudian cari kode ]]></b:skin>
4. Tempelkan kode dibawah ini di atas kode ]]></b:skin> ini kodenya
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
body{padding:30px;}
.container{width:100%;height:40px;position:relative;margin-bottom:30px;}
#toggle{-webkit-appearance:none;appearance:none;height:40px;width:75px;background-color:#15181f;position:absolute;right:0;border-radius:20px;outline:none;cursor:pointer;}
#toggle:after{content:"";position:absolute;height:30px;width:30px;background-color:#ffffff;top:5px;left:7px;border-radius:50%;}
p{font-family:"Open Sans",sans-serif;line-height:35px;text-align:justify;}
.dark-theme{background-color:#15181f;color:#e5e5e5;}
.dark-theme #toggle{background-color:#ffffff;}
.dark-theme #toggle:after{background-color:transparent;box-shadow:10px 10px #15181f;top:-4px;left:30px;}


5. Kemudian masih di template, cari kode </body>, dan tempelkan kode dibawah ini diatas kode tersebut
<script type='text/javascript'> 
//<![CDATA[
document.getElementById("toggle").addEventListener("click", function(){
document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});  
//]]> 
</script> 


6. Terakhir masuk ke Tata Letak atau Tambah Widget Header. Kalian pasti tahu letak ini dimana, kemudian langsung saja taruh kode dibawah ini disitu ya, terus save saja
<div class="container">
<input type="checkbox" id="toggle">
</div>
<p>Tutorial Membuat Button Dark Mode di Blog. Dalam kesempatan kali ini kami akan memberikan sedikit tutorial mengenai penambahan Button Dark Mode yang sederhan untuk dapat ditampilkan secara baik. Dengan adanya tombol ini, blog bisa dilihat dalam dua mode yaitu mode terang dan gelap. Mode terang biasanya untuk melihat isi blog atau membaca artikel di blog pada siang hari. Dan ketika malam hari untuk menghindari kelelahan mata, kita bisa menggunakan mode gelap atau dark mode. Semoga tutorial ini bisa membantu dan bermanfaat bagi kita semua. Terima kasih yang sudah menyempatkan waktu luang untuk sekedar mampir disini. Salam</p>


Catatan :

Tutorial Membuat Button Dark Mode di Blog. Dalam kesempatan kali ini kami akan memberikan sedikit tutorial mengenai penambahan Button Dark Mode yang sederhan untuk dapat ditampilkan secara baik. Dengan adanya tombol ini, blog bisa dilihat dalam dua mode yaitu mode terang dan gelap. Mode terang biasanya untuk melihat isi blog atau membaca artikel di blog pada siang hari. Dan ketika malam hari untuk menghindari kelelahan mata, kita bisa menggunakan mode gelap atau dark mode. Semoga tutorial ini bisa membantu dan bermanfaat bagi kita semua. Terima kasih yang sudah menyempatkan waktu luang untuk sekedar mampir disini. Salam


Tulisan diatas ganti dengan tulisan kalian sendiri ya. Sekarang lihat deh di blog kamu pasti sudah ada button Dark Mode-nya. Terima kasih ya yang sudah mampir disini di artikel Membuat Fitur Dark Mode Keren di Blog. Semoga blog kamu semakin keren dengan fitur Mode Gelap ini. Salam.



Bagikan ke teman-teman kamu
Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Membuat Fitur Dark Mode Keren di Blog Secara Mudah . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon