Cara Pasang Dark Mode Pada Template Blog Viomaqz
Mashabibi.com - Cara pasang dark mode pada template blog Viomaqz – memasang dark mode ialah bertujuan supaya mata pengunjung tidak cepat kelelahan ketika membaca artikel. Dark mode sangat bermanfaat bagi pembaca.
Dark mode bisa meminimalisir terjadinya kanker akibat cahaya biru yang dikeluarkan oleh device pembaca. Dengan mengaktifkan dark mode, fitur ini akan otomatis meminimalisir kan cahaya biru guna melindungi penglihatan pembaca.
Selain itu, dark mode juga bermanfaat untuk pembaca di tempat yang gelap. Karena jika dark mode tidak diaktifkan pada tempat gelap. Mata akan sangat cepat kelelahan dan bisa menyebabkan mata merah. Dengan mengaktifkan dark mode. Suasana bacaan dan tempat menjadi sama gelap dan mempermudah mata untuk melihat dan membaca artikel.
Fitur dark mode juga bermanfaat untuk mendapatkan pengunjung loyal atau pengunjung setia. Pengunjung blog akan akan tetap mengunjungi sebuah blog karena pada blog tersebut terdapat beberapa fitur yang tidak bisa ditemukan pada blog lain. Yaitu fitur dark mode yang juga bisa menghindari radiasi hp.
Fitur dark mode bisa dipasang kan pada berbagai Template premium maupun gratis. Kali ini Mas Habibi akan mencoba memasangkan fitur satu ini pada template Blog Viomaqz. Penasaran kelanjutan tutorial nya? Berikut tutorial cara pasang dark mode pada template Blog Viomaqz.
Cara pasang Dark Mode Pada Template Blog Viomaqz
Cara satu ini sudah saya coba dan 100% SEO Friendly dan responsif. Berikut tutorialnya Sebelum itu backup dulu Template kalian agar mengatasi error’ nantinya.
1.Letakkankode CSS Berikut sebelum 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:#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, .Night #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;}
2.Setelah itu letakkan kode javascript berikut 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>
3.Terakhir tambahkan kode HTML night mode berikut tepat diatas atau sebelum 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>
NB: Icon night mode tersebut bisa kamu ubah-ubah sesuai selera kamu.
Cara pasang dark mode pada template blog Viomaqz tentunya mudah kan. Fitur dark mode tersebut juga sudah SEO friendly dan responsif tentunya. Untuk menambahkan efek bintang ketika dark mode aktif. Kamu bisa baca cara membuat night mode dengan efek bintang jatuh dari inwepo.
Berikut tutorial dari Mas Habibi tentang cara pasang dark mode pada template blog Viomaqz.semoga kalian berhasil. tapi ingat, jangan lupa terlebih dahulu untuk backup template blog kalian. Assalamualaikum.wr.wb
Sumber tutorial cara pasang dark mode pada template blog Viomaqz:
https://www.dewaplokis.com/2020/03/cara-membuat-night-mode-mode-blogger.html