Cara Mudah Membuat Mode Gelap [Dark Mode] Responsive SEO Friendly Pada Blog

Mode gelap, mode malam, night mode, dark mode

Sebagai seorang penulis artikel atau publisher di blog ataupun website, tentu kalian ingin selalu memberikan kemudahan dan kenyamanan bagi para pembaca artikel mu. Karena, tidak semua orang menyukai layar ponsel yang terlalu terang/cerah dalam membaca. Kecerahan layar ponsel yang berlebihan, menyebabkan mata akan menjadi sakit dan perih akibat dari radiasi cahaya yang berlebihan. Beberapa orang akan mengalami mata lelah dengan cepat, apabila membaca pada keadaan layar ponsel yang terlalu cerah/terang.

Selain itu, dengan tombol dark mode/mode gelap atau sebagian orang juga menyebutnya dengan sebutan mode malam, pengunjung blogmu akan lebih bebas untuk memilih tingkat kecerahan yang seperti apa yang mereka inginkan dalam membaca sebuah tulisan, lebih suka dengan layar yang terang/cerah, atau mungkin lebih menyukai dengan tampilan layar gelap.

Pada tutorial yang saya beri judul cara mudah membuat mode gelap [Dark Mode] responsive SEO friendly pada blog kali ini, ada beberapa kode css yang harus ditempelkan/disematkan pada menu Edit HTML blog kalian.

Penggunaan kode ini bisa kalian terapkan pada berbagai macam jenis template, dan akan lebih responsive jika kalian menggunakan template viomagz, linkmagz ataupun template evomagz.

Baiklah, tanpa banyak cerita lagi, langsung saja saya bagikan kode css yang dibutuhkan dalam membuat tampilan blog mode gelap/mode malam ini.

1. Pilih menu Tema Blog

2. Kemudian pilih Edit HTML

3. Diatas Kode ]]</b:skin> tempelkan seluruh kode dibawah ini

/* dark */

.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;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;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.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;}
.Night{background:#0c0c0c;color:#fff;}
.Night #wrapper{background:#121212;color:#ddd;}
.Night #header-container{background:#000;color:#ddd;}
.Night #cssmenu ul ul li{background:#121212;}
.Night #cssmenu ul ul li a{color:#fff;background:#121212;}
.Night #cssmenu ul li{background:#000;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night .above-post-widget h2{color:#ddd;}
.Night .latest-post-title h2{color:#ddd;}
.Night h2.post-title a{color:#ddd;}
.Night h1.post-title{color:#ddd;}
.Night .sidebar h2{color:#ddd;}
.Night .sidebar-sticky h2{color:#ddd;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #ddd;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#ddd;}
.Night .artikel-terbaru a{color:#ddd;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#ddd;}
.Night .PopularPosts ul li a{color:#ddd;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-wrapperx{background:#000;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#ddd;}

4. Setelah itu, lanjutkan dengan menempelkan seluruh kode script dibawah ini tepat diatas kode </body>

<script>

//<![CDATA[

$(document).ready(function () {

$("body").toggleClass(localStorage.toggled),

$("#modedark").on("click", function () {

"Night" != localStorage.toggled ? ($("body").toggleClass("Night", !0), localStorage.toggled = "Night", $(".section-center").css("display", "block")) : ($("body").toggleClass("Night", !1), localStorage.toggled = "", $(".section-center").css("display", ""))

}),

$("body").hasClass("Night") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1)

});

//]]>

</script>

5. Kemudian salin dan tempelkan juga kode untuk icon tombol dark mode diatas kode </header> atau bisa juga kalian tempelkan tepat dibawah kode menu-menu blog kalian yang ada pada header blog

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' viewbox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg></label></div>

6. Jangan lupa di save/simpan

7. Selesai

Contoh Tombol Dark Mode Pada Template Viomagz 4.3.0

Cara Menambahkan Efek Bintang Jatuh Pada Dark Mode/Mode Gelap

Untuk menyempurnakan keindahan tampilan mode gelap yang ada pada blog kalian, saya rasa tidak ada salahnya jika kalian menambahkan efek bintang jatuh. Kodenya bisa kalian lihat dibawah ini

1. Salin dan tempelkan kode HTML dibawah ini tepat diatas kode ]]</b:skin> atau diatas kode </style>


.section-center{position:fixed;width:100%;height:100%;top:50%;left:50%;display:none;overflow:hidden;z-index:5;pointer-events:none;box-shadow:0 0 50px 5px rgba(255,148,0,.1);transform:translate(-50%,-50%)}
.section-center{-webkit-transition:all 500ms linear;transition:all 500ms linear}
.shooting-star{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.shooting-star-2{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.star{z-index:2;position:absolute;top:185px;left:25px;background-image:url('https://ivang-design.com//svg-load/air/star.png');background-size:15px 15px;width:15px;height:15px;opacity:0.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1200ms linear;transition:all 1200ms linear}
.star.snd{top:100px;left:310px;animation-delay:1s}
.star.trd{top:130px;left:100px;animation-delay:1.4s}
.star.fth{top:190px;left:200px;animation-delay:1.8s}
.star.fith{top:85px;left:1080px;animation-delay:2.2s}
@keyframes animShootingStar{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px}}
@keyframes animShootingStar-2{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px}}
@keyframes starShine{0%{transform:scale(0.3) rotate(0deg);opacity:0.4}25%{transform:scale(1) rotate(360deg);opacity:1}50%{transform:scale(0.3) rotate(720deg);opacity:0.4}100%{transform:scale(0.3) rotate(0deg);opacity:0.4}}

2. Kemudian salin dan tempelkan kode pemanggil berikut ini tepat diatas kode </body>


 <div class='section-center'> 
 <div class='shooting-star'/>
 <div class='shooting-star-2'/>
 <div class='shooting-star-3'/>
 <div class='star'/>
 <div class='star snd'/>
 <div class='star trd'/>
 <div class='star fth'/>
 <div class='star fith'/>
</div>

3. Kemudian save/simpan

4. Setelah semuanya selesai, kemudian Perbarui perubahan yang kalian buat.

5. Selesai

Itulah tadi cara mudah membuat mode gelap [Dark Mode] yang responsive SEO friendly pada blog kalian. Ikuti tahapannya dengan benar agar tidak terjadi kesalahan. Jika ada pertanyaan atau saran, silahkan isi di kolom komentar.

Selamat mencoba dan terima kasih!