Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging / VioMagz

Cara Memasang Dark Mode / Night Mode di Blog VioMagz, v4.9.0?

Diposting oleh Rhulweb
Cara Memasang Dark Mode / Night Mode di Blog VioMagz

Dark Mode / Night Mode adalah fitur yang cukup penting ada pada sebuah blog. Fitur ini berguna bagi pengunjung demi kenyamanan membaca konten di blog kita. Apalagi ketika ia mengunjungi artikel di blog kita saat malam hari, fitur ini dibutuhkan.

Sayangnya, tidak semua tema blog ada fitur dark mode / night mode. Misalnya tema / template blog VioMagz. Oleh karena itu, kita harus memasang sendiri fitur itu di VioMagz. Berikut caranya:

Cara Memasang Fitur Mode Gelap / Mode Malam di Blog VioMagz 

Mode Gelap (Dark Mode) atau Mode Malam ( Nigt Mode) bisa dipasang di template blog VioMagz. Caranya, kita perlu menambahkan kode-kode tertentu pada template VioMagz. Unruk caranya, simak berikut ini.

Sebelum lanjut, perlu kita ketahui bahwa kode-kode yang dimaksud disini nenggunakan kode JQuery. Sedangkan di template VioMagz versi terbarunya, VioMagz v4.9.0, sudah tidak support kode JQuery. Oleh karena itu, kita juga perlu menambahkan kode JQuery juga. Namun, jika kita menggunakan template VioMagz v4.8.0 ke bawah, kita tidak perlu menambahkan kode tersebut.

Langsung saja. Berikut kode-kode dan cara memasang fitur mode gelap / mode malam di template VioMagz v4.9.0 (mungkin juga versi setelahnya):

1. Buka dashboard blogger.
2. Masuk ke menu tema.
3. Tekan tombol segitiga terbalik lalu pilih Edit Tema.
4. Masukkan kode CSS berikut di atas kode ]]></b:skin>

/* 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:#595959;}
.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:#303030;color:#ddd;}
.Night #header-container{background:#222;color:#ddd;}
.Night #cssmenu ul ul li{background:#232323;}
.Night #cssmenu ul ul li a{color:#ddd;background:#222222;}
.Night #cssmenu ul li{background:#222222;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night #cssmenu a:hover {background:#303030}
.Night a:link {color:#d5f3ff}
.Night a:visited {color:#d5f3ff}
.Night a:hover {color:#aaaaaa}
.Night #sidebar-wrapper a:link {color: #eeeeee}
.Night #sidebar-wrapper a:visited {color: #eeeeee}
.Night #sidebar-wrapper a:hover {color: #aaaaaa}
.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 .label-info-th {background:#303030}
.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-widget-container{background:#292929;color:ddd;}
.Night #footer-navmenu{background:#262626;color:ddd;}
.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;}

5. Masukkan kode html switch dark mode icon berikut di atas kode </header> 

<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. Masukkan kode JavaScript berikut di atas 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> 

7. Masukkan kode JQuery berikut di bawah kode <head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

8. Pastikan semua kode sudah dimasukkan dengan benar, kemudian simpan perubahan tema.

Setelah perubahan tema selesai disimpan, coba cek tampilan blog kita dan coba tekan ikon brightness yang berada di dekat ikon pencarian (seperti pada blog Rhulweb.com ini). Jika tidak mode tidak berhasil, coba ulangi langkah-langkah di atas dengan benar.

Cara memasang mode gelap / mode malam di VioMagz tidak berhenti disitu. Ini karena ada sedikit bug setelah melakukannya. Berikut selengkapnya: 

Cara Mengubah Warna Tulisan di Submenu Navigasi VioMagz

Cara Memasang Dark Mode / Night Mode di Blog VioMagz

Gambar diatas adalah bug yang dimaksud. Warna tulisan pada submenu di Navigasi VioMagz menjadi tidak jelas dan tidak seperti sebelumnya. Karena ini tidak bisa diubah melalui Desainer Tema / SESUAIKAN di blog, kita perlu cara lain. Caranya:

1. Masuk ke menu Tata Letak blogger.
2. Edit Custom CSS dengan mengklik ikon Pena.
3. Masukkan kode CSS berikut di kolom konten yang sudah disediakan, kemudian klik Simpan.

#cssmenu ul ul li a{color: #575757;}
#cssmenu>ul>li>a {font-size: 13px}
#cssmenu ul ul li a { font-size: 12px; }

4. Selesai. Silakan cek hasilnya!

Keterangan kode:
  • #575757 = Kode warna di submenu navigasi.
  • 13px = Ukuran tulisan di menu navigasi.
  • 12px = Ukuran tulisan di submenu navigasi.

Penutup

Demikian tutorial terkait cara memasang fitur dark mode / night mode di template blog VioMagz terbaru, termasuk VioMagz v4.9.0. Selamat mencoba dan semoga bermanfaat!!!

Sumber kode: dewaplokis.com
Editor: Syahrul Hanafi