Cara Pasang Fitur Dark Mode Blogger Untuk Template Evomagz

Oktober 04, 2024

Foto: Dark Mode Untuk Template Evomagz

Newsartstory.com - Cara Pasang Fitur Dark Mode Blogger Untuk Template Evomagz. Blog dengan template Evomagz rata-rata tidak memiliki fitur Dark Mode untuk blog. Apalagi script dark mode blogger sedikit ada di pencarian google. Nah inilah seputar script fitur Dark Mode untuk template Evomagz.

Sekilas Sejarah Dark Mode

1. Awal Mula Dark Mode
Dark mode memiliki akar sejarah yang panjang, dimulai sejak era komputer awal. Pada monitor CRT (Cathode Ray Tube), tampilan dengan latar belakang gelap dan teks terang lebih umum, karena lebih mudah dilihat dalam kondisi pencahayaan yang bervariasi.

2. Perkembangan Teknologi
Dengan kemajuan teknologi layar, terutama dengan munculnya LCD dan LED, tampilan terang menjadi lebih populer. Namun, kebutuhan akan tampilan gelap kembali muncul seiring dengan meningkatnya penggunaan perangkat di malam hari.

3. Munculnya Dark Mode di Aplikasi
Di awal 2010-an, beberapa aplikasi mulai memperkenalkan mode gelap, terutama di perangkat mobile. Twitter dan YouTube adalah contoh platform yang mengadopsi fitur ini, memungkinkan pengguna untuk memilih antara mode terang dan gelap.

4. Dark Mode di Blogger
Di dunia blogging, dark mode mulai mendapatkan perhatian ketika platform seperti WordPress dan Blogger menambahkan opsi ini. Blogger, sebagai platform yang populer untuk pengguna individu dan bisnis kecil, mengadaptasi tema gelap untuk meningkatkan pengalaman membaca.

5. Penerimaan dan Tren Modern
Pada akhir 2010-an dan awal 2020-an, dark mode menjadi tren utama. Banyak website, aplikasi, dan sistem operasi (seperti Windows dan macOS) menawarkan pengaturan ini. Blogger pun mengikuti perkembangan ini, dengan tema dan plugin yang mendukung dark mode, memudahkan blogger untuk mengimplementasikannya.

6. Fokus pada Pengalaman Pengguna
Seiring dengan meningkatnya kesadaran akan kenyamanan visual dan aksesibilitas, dark mode menjadi pilihan populer di kalangan pengguna blog. Hal ini mendorong blogger untuk mempertimbangkan penerapan mode ini sebagai bagian dari desain mereka.

Apa Kelebihan Fitur Dark Mode Pada Blogger?

Selain untuk mengubah bakckground pada blog menjadi gelap, ada beberapa kelebihan dark mode untuk blog diantaranya:

1. Pengalaman Membaca yang Nyaman: Dark mode mengurangi silau, membuat pembaca lebih betah berlama-lama di blog, terutama di malam hari.

2. Tampilan Modern: Desain dark mode memberikan kesan yang lebih sleek dan profesional, menarik perhatian pengunjung.

3. Fokus pada Konten: Latar belakang gelap membantu menonjolkan teks dan gambar, membuat konten lebih mudah dicerna.

4. Penghematan Energi: Bagi pengguna dengan layar OLED, dark mode dapat menghemat baterai, meningkatkan durasi penggunaan perangkat.

5. Fleksibilitas: Memungkinkan pengunjung untuk memilih antara mode gelap dan terang, memberikan pengalaman yang lebih personal.

6. Kurang Mengganggu: Dark mode membantu mengurangi gangguan visual, memungkinkan pengunjung untuk lebih fokus pada isi blog.

Mengimplementasikan dark mode dapat meningkatkan daya tarik dan kenyamanan blog Anda, menjadikannya lebih ramah pengguna.

Lantas Apa Kekurangan Dark Mode Pada Blog?

Selain kelebihan fitur dark mode pada blog, ada beberapa kekurangannya juga. Berikut adalah beberapa kekurangan dark mode untuk blog:

1. Kesulitan Membaca Teks Tertentu: Beberapa jenis font atau warna teks mungkin sulit dibaca di latar belakang gelap, terutama jika kontrasnya rendah.

2. Tidak Semua Pengguna Menyukai: Beberapa pengunjung lebih suka mode terang, sehingga memberikan pilihan bisa menjadi tantangan untuk memenuhi semua preferensi.

3. Desain yang Kurang Seragam: Jika tidak dirancang dengan baik, dark mode bisa terlihat tidak konsisten atau kurang profesional.

4. Masalah Aksesibilitas: Pengguna dengan masalah penglihatan tertentu mungkin mengalami kesulitan dengan kombinasi warna dalam dark mode.

5. Penyesuaian CSS yang Rumit: Menerapkan dark mode memerlukan kustomisasi CSS yang mungkin memerlukan keterampilan teknis tambahan.

6. Potensi Masalah dengan Gambar: Beberapa gambar mungkin terlihat kurang baik di dark mode, sehingga perlu penyesuaian.

Meskipun dark mode memiliki banyak kelebihan, penting untuk mempertimbangkan kekurangan ini dalam desain blog.

Tutorial Pasang Fitur Dark Mode Untuk Template Evomagz

Berikut ini cara memasang fitur Dark Mode untuk template Evomagz (Bagi yang mau tambahin fitur ini):

1. Letakkan kode HTML diatas ]]></b:skin>, Gunakan (CTRL+F) untuk mencarinya.

CSS Style

/* Dark Mode */
/* Button Dark Mode */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:40px;top:0;z-index:999}
.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}
.modedark svg path{fill:#fff}
.modedark .check:checked ~ .NavMenu{opacity:1;visibility:visible;top:80px;min-width:200px;transition:all .3s ease;z-index:2}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}
.iconmode:hover{border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%}
.check{display:none}
.modedark .iconmode .openmode{display:block}
.modedark .iconmode .closemode{display:none}
.modedark .check:checked ~ .iconmode .openmode{display:none}
.modedark .check:checked ~ .iconmode .closemode{display:block}

/* Warna Night Mode */
.Night #wrapper{background:#292e38}
.Night #HTML3{background:#1d2129}
.Night #header-container{background:#1d2129}
.Night #footer-widget-container{background:#1d2129}
.Night .share-this-pleaseeeee{background:#292e38}
.Night .related-post h4{background:#292e38}
.Night #label-info-th{background:#1d2129}
.Night body{background:#1d2129}
.Night .post-body{color:#cccccc}
.Night #baca-juga h2{color:#cccccc;background:#1d2129}
.Night .label-info-th a{color:#cccccc;background:#3d4658}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan{color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content{color:#cccccc;background:#1d2129}
.Night .post-info{color:#cccccc}
.Night{background:#1d2129}
.Night h2.post-title a{color:#9e9e9e}
.Night h2.post-title a:hover{color:#f17f43}
.Night .post-title{color:#fff}
.Night ul.nav-social{color:#1d2129}
.Night .post-snippet{color:#cccccc}
.Night #ignielNewsletter{background:#292e38}
.Night #Label1{background:#292e38}
.Night .post{background:#292e38;border-bottom-color:#252a33}
.Night .PopularPosts ul li a:hover{color:#f17f43!important}
.Night .PopularPosts1 h2{background:#343944}
.Night .PopularPosts ul li a{color:#9e9e9e!important}
.Night .PopularPosts ul li:nth-child(1){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(2){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(3){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(4){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(5){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(6){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(7){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(8){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(9){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(10){background-color:#292e38}
.Night .PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
.Night .latest-post-title h2{background:#292e38;border-bottom-color:#313640}
.Night .newspaptext{color:#9e9e9e}
.Night .list-label-widget-content ul li{border-bottom-color:#313640}
.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
.Night #ignielNewsletter .medsos__{border-top-color:#313640}
.Night #footer-container{background:#12161f}
.Night #footer-navmenu{background:#171b25}
.Night .sidebar h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .sidebar-sticky h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .latest-post-title h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}
.Night #back-to-top{background:#454952}
.Night .comments h3{color:#b7b7b7;border-bottom-color:#313640}
.Night .breadcrumbs{color:#b7b7b7;border-bottom-color:#313640}
.Night .btnsocialshare{background:#383c44}
.Night .label-line::before{background:#1d2129}
.Night .label-line-c::before{background:#333740}
.Night a.showcontent:hover{background:#373a42}
.Night a.showcontent{background:#292e38}
.Night #ignielNewsletter input{background:#272b33;border-color:#2b303a}
.Night .comments .comments-content .comment-content{color:#ffffff}
.Night div#Label1 h2{border-bottom:1px solid #272b33;background:#343944}
.Night .related-post-style-3 .related-post-item-title{color:#bbb}
.Night #baca-juga ul{border:2px solid #333740}
.Night #baca-juga h2{border:2px solid #292e38}
.Night #comments a.hiddencontent{background:#424854}
.Night .comments .comments-content .comment-thread ol{background:#292e38}
.Night .comments .comments-content .inline-thread{background:#292e38}

Note: untuk bagian baris pertama .modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:40px;top:0;z-index:999} yang diberi warna merah, kalian bisa ubah ukuran dan posisi Dark Mode tombol (right=kanan),(left=kiri). dan ukuran angka 40 px bisa kalian ubah sesuka hati.

2. Letakkan Script Dark Mode Tombol diatas <div class='search-icon'>, Gunakan (CTRL+F) untuk mencarinya.

Dark Mode Tombol

3. Letakkan Script Dark Mode diatas </body>, Gunakan (CTRL+F) untuk mencarinya.

Script Dark Mode

Itulah cara memasang fitur Dark Mode untuk template Evomagz yang tidak mendukung fitur Dark Mode dari bawaannya. Selamat mencoba! Sekian dan terima kasih!

DEMO

Dapatkan informasi berita pilihan dari Newsartstory.com di platform Google News secara gratis

Baca Juga

Donasi Untuk Penulis

Donasi via Trakteer

Donasi via PayPal

Dana / OVO / GoPay 082124346431

16 komentar

Hastin Pratiwi

Aku termasuk pembaca blog yang suka dengan mode gelap, Kak. Di aplikasi lain juga mode gelap ini sering kuaktifkan. Selain mengurangi gangguan cahaya ke mata, mode gelap menurutku juga lumayan menghemat kinerja baterai ponsel.

Balas
mas Dirman

Jadi tahu deh bagaimana sejarahnya mengapa ada fitur darkmode di template, ternyata salah satu penyebabnya untuk meningkatkan pengalaman pengguna saat berkunjung di blog ya? menarik banget emang fitur ini.

Bahkan hampir semua template blogger sekarang sudah tersedia fitur ini secara default.

Balas
Apabedanyacom

Wih makasih toturialnya, harus disesuain sama audiens web visitor nih biar mereka nyaman bacanya kan

Balas
Pipit ZL ceritaoryza.com

Wuih keknya menarik nih. Saya lihat demonya ternyata keren juga. Ijin coba dulu ya kak

Balas
Dila

Oh ternyata dark mode itu bisa menghemad baterai untuk tipe layar OLED. Btw saya kurang suka pake dark mode, kadang kalau baca tulisan yg panjang, nanti mata itu kayak nggak nyaman, dan tulisannya berbayang. Apa mata saya yang bermasalah yah?

Balas
Rifqi Fauzan Sholeh

Pasang fitur dark mode di template Evomagz ternyata gampang banget, bikin tampilan blog lebih nyaman buat mata, apalagi buat yang sering baca di malam hari.

Balas
abahraka

Keren juga ya, evomagz ada versi darkmodenya, makin moncer aja nih templatenya dari mas s*****g

Balas
Firman

Mode gelap ini penting banget buat yang suka begadang sambil di depan laptop. Terimakasih infonya

Balas
Filza Halwa

Dark mode emang bikin nyaman mata, apalagi untuk mata yang sensitif dengan cahaya.

Balas
Molzania

kalo molly jujur kurang suka fitur dark mode. apalagi utk blog karena kadang tulisannya suka gak kebaca gitu loh. klo salah pilih warna.

Balas
Fenni Bungsu

Iya juga ya kalo tampilan mode gelap gitu bisa sekalian hemat baterai juga. Lebih adem juga sih buat dilihat

Balas
SHalikah

Di beberapa momen, dark mode itu memang nyaman sih untuk mata. Jadi, punya blog yang bisa memberikan pilihan fitur ini memang jadi nilai plus ya sepertinya. Saya jadi kepikiran nih untuk cari-cari info juga, untuk template yang saya gunakan saat ini bisa support dark mode juga gak ya.

Balas
Antung apriana

Aku termasuk yang nggak terlalu suka sama dark mode sih soalnya berasa gelap banget

Balas
Kata Nieke

Dulu pernah punya blog yang dibuat percobaan. Lalu coba seting dark mode. Ternyata saya yang kurang cocok sama mode ini. Lebih suka tampilan putih. Akhirnya dibalikin ke setelan awal. Terganutng selera juga sih. Ada yang justru nyaman dengan dark mode.

Balas
Dyah Kusuma

Mungkin bagi beberapa orang lebih nyaman darkmode ya, tapi saya masih menyukai yang netral ga perlu setting darkmode sih, tapi ya balik ke selera sih

Balas
lendyagasshi

Aku dulu sbelum ganti template yang sekarang aku pakai, pernah pasang template dengan backgroung hitam ((karena waktu itu belum ada dark mode)). Sekarang karena semakin canggih, jadi pembaca bisa memilih mau light mode atau dark mode, disesuaikan dengan kebutuhan pembaca.

Balas