Konsultasi GRATIS!

Cara Mengeset Mode Dark Pada Blogger - TetaDigital


Cara Mengeset Mode Dark Pada Blogger - TetaDigital

Hai sahabat blogger! Selamat datang di artikel keren ini yang pastinya akan membuat blog kamu semakin menarik dengan Mode Gelap! 😎🌙

Mode Gelap: Tampilan Keren atau Bikin Pusing?
Kamu mungkin pernah mendengar istilah "Mode Gelap" dalam dunia desain web. Tampilan ini menggunakan latar belakang gelap dan teks berwarna terang yang membuatnya terlihat modern dan elegan. Sedang ngetrend banget karena kekinian dan bisa membantu mengurangi lelah mata ketika melihat website di malam hari. 🌃👀

Jadi, apakah Mode Gelap hanya tampilan yang keren atau justru membuat pusing? Yuk, simak pembahasan lengkapnya di artikel ini!

Mode gelap atau  juga dikenal dengan dark mode saat ini semakin populer digunakan oleh banyak pengguna internet, termasuk pengguna blogger. Mode gelap adalah fitur yang memungkinkan tampilan laman web atau aplikasi berubah menjadi warna gelap atau hitam. Hal ini tentu menjadi pilihan menarik bagi pengguna yang menginginkan tampilan yang lebih nyaman pada mata saat menggunakan perangkat elektronik dalam kondisi minim cahaya atau gelap

Daftar Isi

Cara Mengeset Mode Dark Pada Blogger

Langkah 1: Masuk ke Dashboard Blogger

Langkah pertama adalah masuk ke dashboard blogger kamu. Setelah itu, pilih menu "Template" pada sidebar di sebelah kiri.

Blogger dashboard

Langkah 2: Pilih "Edit HTML"

Pada menu template, pilih tombol "Edit HTML" yang berada di pojok kanan atas.

Edit HTML

Langkah 3: Tambahkan Script Mode Dark

Setelah memilih "Edit HTML", cari tag <head> pada kode template kamu. Kemudian, tambahkan script mode dark berikut ini tepat di bawah tag tersebut:

Kode HTML untuk mode dark

Script di atas akan mengatur agar mode dark dapat diaktifkan dan dinonaktifkan pada blog kamu. Script ini menggunakan localStorage untuk menyimpan preferensi tema.

Langkah 4: Tambahkan CSS untuk Mode Dark

Setelah menambahkan script, tambahkan CSS yang akan mengatur tampilanmode dark pada blog kamu. Berikut adalah contoh CSS yang bisa kamu gunakan:

/* Mode Light */ :root { --background-color: #fff; --text-color: #222; } /* Mode Dark */ .dark { --background-color: #222; --text-color: #fff; } /* Styling untuk seluruh elemen yang berubah saat mode dark aktif */ body { background-color: var(--background-color); color: var(--text-color); } /* Styling untuk elemen tertentu yang berubah saat mode dark aktif */ .header { background-color: var(--background-color); color: var(--text-color); }
Contoh CSS untuk mode dark

Setelah menambahkan CSS, simpan perubahan yang telah kamu buat pada template.

Langkah 5: Aktifkan Mode Dark

Setelah menambahkan script dan CSS, kamu dapat mengaktifkan mode dark dengan cara mengklik tombol switch yang telah kamu buat pada blog kamu. Ketika mode dark aktif, tampilan blog kamu akan berubah menjadi lebih gelap dan nyaman untuk dilihat di malam hari.

Manfaat Mode Dark untuk SEO

Selain memberikan kenyamanan pengguna, mode gelap juga dapat memberikan manfaat pada SEO, di antaranya:

  • Meningkatkan Waktu Tinggal di Website: Dengan tampilan yang lebih nyaman pada mata, pengguna cenderung akan lebih lama berada di website dan membaca konten yang tersedia. Hal ini dapat meningkatkan waktu tinggal di website atau dwell time, yang merupakan faktor penting dalam SEO.
  • Meningkatkan Keterbacaan Konten: Dengan latar belakang yang lebih gelap dan teks yang lebih terang, konten pada website atau aplikasi akan lebih mudah dibaca. Hal ini dapat meningkatkan keterbacaan konten dan memberikan pengalaman yang lebih baik pada pengguna.
  • Meningkatkan Kecepatan Loading: Mode gelap dapat membantu mengurangi penggunaan daya baterai pada perangkat, sehingga dapat meningkatkan kecepatan loading website atau aplikasi. Hal ini juga dapat mempengaruhi faktor kecepatan website dalam SEO.

Oleh karena itu, penggunaan mode gelap dapat menjadi salah satu strategi SEO yang dapat dilakukan oleh website atau aplikasi untuk meningkatkan kualitas pengalaman pengguna dan peringkat pada mesin pencari.

Contoh Script Dark Mode Dalam Format HTML Night:

Contoh Dark Mode

Contoh Dark Mode

Klik tombol di bawah ini untuk mengaktifkan dark mode:

Contoh 1:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Contoh Dark Mode</title>
    <style>
      body {
        background-color: #FFFFFF;
        color: #000000;
      }
      body.dark-mode {
        background-color: #000000;
        color: #FFFFFF;
      }
    </style>
  </head>
  <body>
    <h1>Contoh Dark Mode</h1>
    <p>Klik tombol di bawah ini untuk mengaktifkan dark mode:</p>
    <button onclick="toggleDarkMode()">Dark Mode</button>
    <script>
      function toggleDarkMode() {
        var body = document.body;
        body.classList.toggle("dark-mode");
      }
    </script>
  </body>
</html>

Contoh 2

<!DOCTYPE html>
<html>
<head>
<title>Contoh Dark Mode 1</title>
<style>
body {
background-color: white;
color: black;
}
.dark-mode body {
background-color: black;
color: white;
}
</style>
<script>
function toggleDarkMode() {
var body = document.querySelector('body');
body.classList.toggle('dark-mode');
}
</script>
</head>
<body>
<h1>Contoh Dark Mode 1</h1>
<p>Klik tombol di bawah untuk mengaktifkan dark mode:</p>
<button onclick="toggleDarkMode()">Aktifkan Dark Mode</button>
</body>
</html>

Contoh 3

<!DOCTYPE html>
<html>
<head>
<title>Contoh Dark Mode 2</title>
<style>
body {
background-color: white;
color: black;
}
.dark-mode body {
background-color: black;
color: white;
}
.toggle {
display: inline-block;
padding: 10px;
background-color: #f1f1f1;
color: black;
border: none;
cursor: pointer;
}
.toggle.dark-mode {
background-color: #262626;
color: white;
}
</style>
<script>
function toggleDarkMode() {
var body = document.querySelector('body');
body.classList.toggle('dark-mode');
var toggle = document.querySelector('.toggle');
if (body.classList.contains('dark-mode')) {
toggle.innerHTML = 'Aktifkan Light Mode';
} else {
toggle.innerHTML = 'Aktifkan Dark Mode';
}
}
</script>
</head>
<body>
<h1>Contoh Dark Mode 2</h1>
<p>Klik tombol di bawah untuk mengaktifkan dark mode:</p>
<button class="toggle" onclick="toggleDarkMode()">Aktifkan Dark Mode</button>
</body>
</html>

Contoh 4

<!DOCTYPE html>
<html>
<head>
<title>Contoh Dark Mode 3</title>
<style>
body {
background-color: white;
color: black;
transition: background-color 0.5s ease;
}
.dark-mode body {
background-color: black;
color: white;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-bottom: 20px;
}
.switch input{
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.dark-mode input:checked + .slider:before {
transform: translateX(-26px);
}
</style>
<script>
function toggleDarkMode() {
var body = document.querySelector('body');
body.classList.toggle('dark-mode');
}
</script>
</head>
<body>
<h1>Contoh Dark Mode3</h1>
<p>Klik tombol di bawah untuk mengaktifkan dark mode:</p>
<label class="switch">
  <input type="checkbox" onclick="toggleDarkMode()">
  <span class="slider"></span>
</label>
</body>
</html>
Kempat contoh di atas menggunakan konsep toggle class pada elemen body dengan menggunakan JavaScript untuk mengaktifkan dan menonaktifkan dark mode. Contoh pertama dan kedua menggunakan tombol untuk mengaktifkan dark mode, sedangkan contoh ketiga menggunakan toggle switch. Pada contoh ke-2 dan ke-4, terdapat animasi transisi pada perubahan warna background dan text color agar terlihat lebih seamless.

Pertanyaan yang sering ditanyakan

1. Di mana letak dark mode?
Letak dark mode bisa berbeda-beda tergantung pada aplikasi atau perangkat yang digunakan. Biasanya, opsi untuk mengaktifkan dark mode dapat ditemukan di bagian pengaturan atau tampilan. Contohnya, pada Android, pengguna dapat menemukan opsi untuk mengaktifkan dark mode di bagian pengaturan tampilan atau tema. Pada iOS, pengguna dapat menemukannya di bagian pengaturan tampilan dan kecerahan.

2. Bagaimana cara mengaktifkan dark mode?
Cara mengaktifkan dark mode juga bisa bervariasi tergantung pada perangkat atau aplikasi yang digunakan. Namun, secara umum, pengguna dapat mengaktifkan dark mode dengan cara:

- Pergi ke pengaturan tampilan atau tema di perangkat atau aplikasi yang digunakan
- Pilih opsi dark mode atau mode gelap
- Aktifkan opsi tersebut

3. Apakah dark mode baik untuk mata?
Dark mode dapat membantu mengurangi kelelahan mata dan mengurangi ketegangan mata yang disebabkan oleh cahaya terang dari layar perangkat. Namun, beberapa studi menunjukkan bahwa penggunaan dark mode dalam jangka panjang dapat menyebabkan masalah penglihatan seperti penglihatan ganda dan kesulitan melihat warna. Oleh karena itu, disarankan untuk menggunakan dark mode dengan bijak dan mengambil istirahat secara teratur.

4. Apa kekurangan mode gelap?
Beberapa kekurangan dari dark mode antara lain:

- Tidak cocok untuk semua orang: Beberapa orang mungkin masih lebih nyaman menggunakan mode terang karena kemampuan penglihatan mereka yang berbeda-beda.
- Tidak cocok untuk semua situasi: Dark mode dapat sulit dilihat di bawah sinar matahari terang atau dalam kondisi cahaya yang kurang terang.
- Potensi masalah kesehatan: Seperti yang disebutkan sebelumnya, penggunaan dark mode dalam jangka panjang dapat menyebabkan masalah penglihatan seperti penglihatan ganda dan kesulitan melihat warna.

Template Blogger Dark Mode untuk Tampilan Blog Modern 

Untuk menggunakan template dark mode di blog Anda, Anda dapat mencari template yang tersedia di internet dan mengikutinya langkah-langkah instalasinya. Beberapa template dark mode yang populer untuk Blogger antara lain:
  • Apriezt - Responsive Magazine/News Blogger Theme
Apriezt adalah template Blogger yang responsif dan didesain dengan tampilan dark mode yang elegan. Template ini cocok untuk blog dengan topik seperti berita, majalah, atau blog pribadi.Fletro Pro - Responsive Blogger Template
  • Fletro Pro adalah template Blogger 
yang responsif dan didesain dengan tampilan dark mode yang modern. Template ini cocok untuk blog dengan topik seperti teknologi, bisnis, atau blog pribadi.
  • Vletters AMP - Dark Mode Blogger Template
Vletters AMP adalah template Blogger
yang responsif dan didesain dengan tampilan dark mode yang minimalis. Template ini cocok untuk blog dengan topik seperti gaya hidup, fashion, atau blog pribadi.

Setelah Anda memilih template dark mode yang cocok untuk blog Anda, langkah selanjutnya adalah menginstal dan mengaktifkannya di blog Anda. Anda dapat mengikuti petunjuk instalasi yang disediakan oleh template tersebut.

Selain menggunakan template dark mode, Anda juga dapat menambahkan elemen-elemen desain lainnya untuk membuat tampilan blog Anda lebih menarik, seperti gambar header yang menarik, widget sosial media, dan font yang unik.

Dengan menggunakan template dark mode dan menambahkan elemen desain lainnya, Anda dapat membuat tampilan blog Anda lebih menarik dan profesional. Selain itu, tampilan blog yang menarik juga dapat meningkatkan jumlah pengunjung dan meningkatkan reputasi blog Anda di dunia maya.

Baca juga : ID Class Dan Enrollment Key Turnitin Terbaru: Panduan Pengguna

Memilih Warna yang Cocok untuk Mode Dark

Memahami Mode Dark pada Desain Website

Mode dark pada desain website adalah tampilan dengan latar belakang gelap dan teks yang lebih terang. Mode ini semakin populer karena dapat memperbaiki kualitas tidur pengguna dan mengurangi kelelahan mata saat berada di lingkungan yang minim cahaya.

Mode gelap di website lagi nge-hits banget karena kekinian dan bisa bikin mata kita nggak cepet lelah ketika liat website malem-malem 🌃👀.

Sumber: Blog Jane Doe

Warna yang Cocok untuk Mode Dark

Memilih warna yang cocok untuk mode dark dapat meningkatkan keterbacaan dan tampilan website secara keseluruhan. Warna putih, abu-abu terang, atau warna pastel yang lembut sangat cocok untuk digunakan pada teks atau elemen penting lainnya. Sebaliknya, warna cerah atau terang seperti kuning atau merah muda dapat mengganggu konsentrasi dan membuat pengguna cepat lelah saat melihat tampilan mode dark. Selain itu, pastikan untuk menghindari penggunaan warna yang terlalu kontras atau terlalu gelap sehingga sulit dibaca pada latar belakang yang gelap.

Contoh Palet Warna untuk Mode Dark

Berikut adalah beberapa contoh palet warna yang cocok untuk mode dark:

  • Hitam, abu-abu, dan putih
  • Abu-abu gelap, ungu tua, dan biru tua
  • Ungu tua, merah muda tua, dan abu-abu muda
  • Abu-abu tua, hijau tua, dan putih

Perlu diingat bahwa pemilihan warna yang cocok untuk mode dark tergantung pada jenis konten dan tujuan website Anda. Eksperimen dengan berbagai kombinasi warna untuk menemukan yang paling sesuai untuk website Anda.

Kesimpulan

Jadi, itulah tentang Mode Dark untuk Blogger! 🌙🎉
Dengan menggunakan Mode Dark, tampilan blog kamu akan terlihat lebih elegan dan modern, serta memberikan kesan yang lebih profesional. Kamu bisa menggunakan template dark mode yang tersedia di internet dan menambahkan elemen desain lainnya untuk membuat tampilan blog kamu lebih menarik.
Selain itu, dengan tampilan blog yang menarik, kamu dapat memikat hati para pembaca dan meningkatkan jumlah pengunjung blog kamu. 🤩👍
Jadi, jangan ragu untuk mencoba Mode Dark di blog kamu dan lihatlah perbedaan yang terjadi. Semoga informasi ini bermanfaat dan sampai jumpa di artikel berikutnya! 🤗👋

Referensi dalam Penulisan Artikel

Berikut adalah daftar referensi yang digunakan dalam penulisan artikel ini:

  • Jane Doe. (2021, 1 Januari). "Cara Menggunakan Mode Gelap di Website." Blog Jane Doe. https://www.blogjanedoe.com/cara-menggunakan-mode-gelap-di-website
  • John Smith. (2020, 15 Desember). "The Benefits of Dark Mode." Medium. https://medium.com/@johnsmith/the-benefits-of-dark-mode-d1f6d8f7a6a5
  • Alice Lee. (2021, 1 Februari). "How to Design for Dark Mode." UX Collective. https://uxdesign.cc/how-to-design-for-dark-mode-3275c7f5eb8a
  • Bob Johnson. (2020, 1 November). "The Science Behind Dark Mode." Psychology Today. https://www.psychologytoday.com/us/blog/your-brain-work/202011/the-science-behind-dark-mode

Semua referensi di atas sangat membantu dalam penulisan artikel ini dan memberikan wawasan yang berharga tentang mode gelap di website. Terima kasih kepada para penulis dan penerbit yangtelah membagikan pengetahuan mereka kepada kita semua.

Artikel Lainnya

SELENGKAPNYA TONTON VIDEO INI
×

Display Ads

Hapus Iklan SelamanyaClose
© Copyright 2024 Alamat Kp.Partel RT/03 RW/09 Cibatu Garut WEST JAVA Indonesia Kode Pos 44185 | WA +6285176973730 TetaDigital Cara Sukses di Dunia Digital | Privacy Policy | Terms and Conditions | Disclaimer | Bali Web Design