Cara Membuat dan Menambah Fitur Dark Mode di Blogspot untuk Memanjakan Pengunjung Blog

BLOGSIA - Kali ini saya bagian script kode html sekaligus cara membuat serta menambah atau memasang fitur Dark Mode di blogspot untuk memanjakan dan menarik minat serta kenyamanan pengunjung blog.

Memiliki website dengan trafik tinggi tentu menjadi impian setiap pemilik platform digital. Namun, kenyamanan pengunjung saat membaca konten sering kali luput dari perhatian utama.

Mata yang cepat lelah akibat layar terlalu terang bisa membuat pembaca segera meninggalkan halaman Anda.

Fenomena ini tentu berdampak buruk pada durasi kunjungan dan performa pendapatan iklan platform.

Salah satu solusi terbaik untuk menjaga retensi pembaca adalah menyediakan opsi tampilan yang ramah mata.

Fitur ini kini menjadi standar wajib bagi website modern yang ingin bersaing di papan atas.

Menerapkan cara membuat dark mode pada platform Blogger sebenarnya tidak sesulit yang dibayangkan.

Anda hanya perlu menambahkan beberapa baris kode khusus ke dalam template bawaan.

Berikut adalah panduan sistematis untuk mengubah tampilan platform Anda menjadi lebih adaptif.

Mempersiapkan Kode Gaya Tampilan pada Template Blogger

Langkah awal dalam cara membuat dark mode berfokus pada pengaturan visual agar elemen website berubah warna saat mode aktif.

Anda perlu masuk ke dasbor Blogger, lalu pilih menu Tema dan klik Edit HTML.

Menambahkan Kode CSS Utama Fitur Mode Dark

Cari kode </b:skin> pada kolom editor template Anda.

Setelah menemukannya, sisipkan kode berikut tepat sebelum baris tersebut:


_CSS

/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .panel-primary{background:#2d2d30;color:#fefefe}
.darkMode .panel-body input,.darkMode .panel-body input:focus{background:#2d2d30;color:#fefefe}
.darkMode .wcSafeClose{color:#fefefe}

Kode di atas berfungsi mengatur warna dasar komponen formulir dan panel utama.

Mengintegrasikan Desain Visual Komponen Fitur Dark Mode dengan Template Blog

Langkah berikutnya dalam cara membuat dark mode adalah menambahkan kerangka desain visual yang lebih menyeluruh.

Temukan kode </head> di dalam template blog Anda.

Letkatkan seluruh rangkaian kode gaya berikut tepat di atas tag penutup tersebut:

_HTML

<style>
/*Darkmode*/
.nav-secondary {position:absolute;top:15px;right:70px;}
.darkmode-switch .switch-title{color:#fff}
.darkmode-switch .slider{border:2px solid #fff}
.darkmode-switch .slider:before{background:#fff}
.darkmode-switch .switch:hover .slider:before{background:#ffffff}
.darkmode-switch{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:0}
.darkmode-switch .switch-title{font-size:10px;font-size:.625rem;margin-right:4px;text-transform:uppercase}
.darkmode-switch .switch-title:before{content:&quot;Dark Mode&quot;}
.darkmode-switch .switch{position:relative;display:inline-block!important;padding:0!important;width:38px;height:20px;vertical-align:middle}
.darkmode-switch .switch input{opacity:0;width:0;height:0}
.darkmode-switch .slider{position:absolute;cursor:pointer;border-radius:34px;top:0;left:0;right:0;bottom:0;-webkit-transition:.2s;transition:.2s}
.darkmode-switch .slider:before{position:absolute;content:&quot;&quot;;border-radius:50%;height:12px;width:12px;left:2px;bottom:2px;-webkit-transition:.2s;transition:.2s}
.darkmode-switch input:checked+.slider{background-color:#428c2f;border:2px solid #fff}
.darkmode-switch input:checked+.slider:before{background:#fff;-webkit-transform:translateX(18px);transform:translateX(18px)}

@media only screen and (max-width: 800px){
.header{right:110px!important}
.nav-secondary{right:60px}
}

@media screen and (max-width: 480px){
.darkmode-switch .switch-title:before{display:none}

}

body.darkmode{background:#353535;color:#eee}
body.darkmode a:link{color:#eee;-webkit-transition:all .2s;transition:all .2s}
body.darkmode a:visited{color:#eee}
body.darkmode a:hover{color:#fff}
body.darkmode #wrapper {background: #292e38;}
body.darkmode #blog-pager a,body.darkmode #Label1 a,body.darkmode .FeaturedPost h3 a{color:#353535;}
body.darkmode #footer-widget-container {background:#1d2129;}
body.darkmode .share-this-pleaseeeee {background:#292e38;}
body.darkmode .related-post h4{background:#292e38;}
body.darkmode #label-info-th {background:#1d2129;}
body.darkmode body {background:#1d2129;}
body.darkmode .post-body {color:#fff;background:#292e38;}
body.darkmode .post-body table.tr-caption-container td{color:#fff;}
body.darkmode .post-body table td{background:no-repeat;border:1px solid #f5f5f5;padding:10px;text-align:left;vertical-align:top}
body.darkmode #baca-juga h2 {color:#cccccc;background:#1d2129}
body.darkmode .label-info-th a {color:#cccccc;background:#3d4658}
body.darkmode .post-info {color:#cccccc}
body.darkmode {background:#1d2129;}
body.darkmode h2.post-title a, body.darkmode .comments .comments-content .comment-content{color:#fff;}
body.darkmode h2.post-title a:hover {color:#b7b2b2}
body.darkmode .post-title {color:#fff}
body.darkmode ul.nav-social {color:#1d2129}
body.darkmode .post-snippet {color:#cccccc}
body.darkmode #Label1{background:#292e38;}
body.darkmode .post{background:#292e38;border-bottom-color: #252a33;}
body.darkmode .item-title a{color:#fff}
body.darkmode .latest-post-title h3{border-bottom-color: #313640;}
body.darkmode .list-label-widget-content ul li {border-bottom-color: #313640;}
body.darkmode .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;}
body.darkmode #footer-container{background:#12161f;}
body.darkmode #footer-navmenu{background:#171b25;}
body.darkmode .sidebar-sticky h3 {color:#fff;border-bottom-color: #313640;}
body.darkmode .latest-post-title h3 {color:#fff;border-bottom-color: #313640;}
body.darkmode .above-post-widget h3 {color:#b7b7b7;border-bottom-color: #313640;}
body.darkmode .sidebar h2,body.darkmode .sidebar-sticky h2, body.darkmode .latest-post-title h2, body.darkmode .above-post-widget h2, body.darkmode .comments h3{color:#fff;border-bottom-color: #313640;}
body.darkmode .breadcrumbs {color:#fff;border-bottom-color: #313640;}
body.darkmode .btnsocialshare {background:#383c44;}
body.darkmode .label-line::before{background: #1d2129;}
body.darkmode .label-line-c::before {background: #333740;}
body.darkmode a.showcontent:hover {background: #373a42;}
body.darkmode a.showcontent{background: #292e38}
body.darkmode .related-post-style-3 .related-post-item-title {color: #bbb;}
body.darkmode #baca-juga ul {border: 2px solid #333740;}
body.darkmode #baca-juga h2 {border: 2px solid #292e38;}
body.darkmode #comments a.hiddencontent {background: #424854;}
body.darkmode .comments .comments-content .comment-thread ol {background: #292e38;}
body.darkmode .comments .comments-content .inline-thread {background: #292e38;}

/* ===== Dark Mode Sidebar ===== */

body.darkmode #sidebar-wrapper a,
body.darkmode .sidebar a,
body.darkmode .sidebar-sticky a{
color:#ffffff !important;
}

body.darkmode #sidebar-wrapper a:hover,
body.darkmode .sidebar a:hover,
body.darkmode .sidebar-sticky a:hover{
color:#ffcc00 !important;
}

body.darkmode #Blog1 .post-snippet{
color:#fff !important;
}
</style>

Rangkaian skrip ini mengontrol transisi warna latar belakang, teks, tautan, hingga area bilah sisi.

Mengatur Logika dan Penempatan Tombol Navigasi Fitur Dark Mode Blog

Setelah visual selesai, langkah berikutnya adalah mengatur fungsionalitas sistem agar dapat bekerja secara otomatis.

Hal ini penting agar preferensi pilihan pembaca dapat tersimpan dengan baik di peramban mereka.

Pemasangan Skrip Memori Otomatis

Cari tag <body> yang menandakan awal dari struktur utama halaman website Anda.

Tepat di bawah baris tersebut, masukkan skrip logika penyimpanan data berikut ini:

_HTML

<script>
(localStorage.getItem('mode')) === 'darkmode' ? document.querySelector('body').classList.add('darkmode') : document.querySelector('body').classList.remove('darkmode')
</script>

Fungsi ini memastikan orientasi warna yang dipilih pengunjung tidak kembali terang saat mereka berpindah artikel.

Menampilkan Tombol Switch Dark Mode pada Blog

Sekarang, Anda perlu meletakkan tombol fisik yang nantinya akan diklik oleh para pembaca.
Gunakan fitur pencarian di editor (Ctrl + F), lalu ketik kata kunci <div class='search-icon'>.

Setelah baris tersebut ditemukan, sisipkan elemen HTML berikut ini tepat di bagian atasnya:

_HTML

<div class='nav-secondary'>

<div class='darkmode-switch'><span class='switch-title'/><label class='switch'><input aria-label='checkbox' class='checkbox' onclick='darkMode()' type='checkbox'/><span class='slider'/></label>

</div>

</div>

Posisi ini sangat strategis karena biasanya berada di dekat menu navigasi atas atau kolom pencarian.

Mengaktifkan Fungsi Interaksi Sistem

Tahap terakhir dalam penerapan cara membuat dark mode adalah memberikan instruksi kerja pada tombol agar mampu mengubah status visual template.

Gulir halaman editor hingga ke bagian paling bawah, lalu temukan tag penutup </body>.

Sematkan rangkaian kode perintah interaktif ini tepat sebelum tag penutup tersebut:

_HTML

<script>//<![CDATA[

function LMcheckCheckbox(){document.querySelectorAll(".checkbox").forEach(function(e){"darkmode"===localStorage.getItem("mode")?e.checked=!0:e.checked=!1})}function darkMode(){localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("body").classList.add("darkmode"):document.querySelector("body").classList.remove("darkmode"),LMcheckCheckbox()}function darkModeHide(){document.querySelectorAll(".darkmode-switch").forEach(function(e){e.parentNode.removeChild(e)})}LMcheckCheckbox(),"undefined"==typeof AzidBloggerSetting&&(AzidBloggerSetting={tombolDarkmode:!0}),0==AzidBloggerSetting.tombolDarkmode&&darkModeHide();

//]]></script>

Pastikan Anda menyimpan seluruh perubahan template dengan menekan ikon simpan di bagian kanan atas.

Uji coba fitur baru ini melalui perangkat seluler dan desktop guna memastikan responsivitas komponen berjalan sempurna.

DEMO 

#FAQ: Pertanyaan Seputar Fitur Dark Mode di Blog

Apakah menerapkan cara membuat dark mode ini bisa memperlambat performa loading blog?

Script yang digunakan sangat ringan dan menggunakan penyimpanan lokal peramban, sehingga dampaknya hampir tidak terasa pada kecepatan muat halaman.

Mengapa warna beberapa elemen di blog saya tidak berubah setelah fitur aktif?

Hal ini terjadi karena perbedaan nama kelas CSS pada setiap template. Anda perlu menyesuaikan target kelas CSS pada kode bagian pertama dengan struktur template Anda.

Apakah fitur ini aman untuk blog yang sudah terpasang iklan Google AdSense?

Sangat aman. Pengaturan ini hanya mengubah skema warna latar belakang dan teks kontainer konten, tanpa memengaruhi kode unit iklan.

#CaraMembuatDarkMode #BloggerTips #BlogSEO #WebDevelopment #CodingBlogger

Thanks for reading: Cara Membuat dan Menambah Fitur Dark Mode di Blogspot untuk Memanjakan Pengunjung Blog, Sorry, my English is bad:)