Cara Membuat Night Mode (Dark Mode) di Blog

ARDINTORO |dot| COM - Berawal dari beberapa waktu lalu ketika saya berkunjung di blog beberapa teman, kok bagus ya tampilan blognya. Bisa di ubah jadi Dark Mode atau Mode malam dengan hanya menekan sekali klik. Akhirnya klamprakan di google saya 😅. Fitur ini sangat bagus untuk memanjakan pengunjung agar mau berlama-lama di blog kita.

Dark Mode cocok di terapkan pada saat mati lampu atau malam hari yang kurang pencahayaan, agar mata nggak sakit saat melihat layar handphone. Selain itu mode malam atau Dark Mode ini sangat ramah terhadap batrai, artinya bila Kalian setting Dark Mode saat membuka blog maka batrai handpone jadi awet.

Setelah muter-muter searching google akhirnya menemukan formula kode script yang cocok untuk template blogger. Kode script ini sudah saya uji coba dan hasilnya sukses 100 %. Memang sebelumnya terjadi error yaitu di bagian balas komentar yang teks-nya nggak mau tampil, tapi setelah saya otak-atik sekarang sudah oke.

Dengan di pasang Night Mode blog Kalian jadi keren dan terlihat semakin propesional, seperti halnya aplikasi-aplikasi populer seperti Opera mini, Uc browser, FB yang sekarang juga sudah di dukung fasilitas Nigt Mode atau Mode malam.

Bila Sobat ingin menerapkan Nigt Mode atau Dark Mode bisa mengikuti tutorial berikut ini. Harus di ingat sebelum menerapkan di blog masing-masing harap di simpan dulu template-nya agar bila terjadi kesalahan bisa di pulihkan dengan mudah.

Cara Memasang Night Mode (Dark Mode) di Blogger

Seperti biasa bila ingin merubah yang berurusan dengan kode script berarti Sobat harus masuk di Tema dari blog Kalian. Setelah terbuka klik saja Edit HTML, untuk mempermudah pencarian kode sebaiknya Sobat munculkan kotak pencarian HTML dengan menekan Ctrl+F. 

(1). Langkah selanjutnya Sobat cari saja kode ]]></b:skin> setelah ketemu copy kode di bawah ini dan paste tepat 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:#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 a.hiddencontent {background: #424854;}
.Night .comments .comments-content .comment-thread ol {background: #1C1C1C;}
.Night .comments .comments-content .inline-thread {background: #1C1C1C;}
.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). Selanjutnya Sobat copy Kode di bawah ini dan tempel 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>

(3). Yang terakhir Kalian tambahkan  kode Night Mode di bawah ini dan tempelkan tepat 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>

Bila semua langkah sudah di lakukan dengan teliti tinggal Kalian save dan lihat hasilnya. Bila di antara Sobat ada yang error saat memasang, ulangi langkah-langkahnya dari awal. Memang butuh kesabaran dalam penerapan ini, tapi bila di lakukan dengan sungguh-sungguh pasti berhasil.

Baca Juga: Cara Membuat Subdomain di Blogger Serta Menghubungkannya ke Cloudflare secara Gratis

Mungkin sampai di sini ya Sobat tutorial cara membuat Dark Mode. Bila di rasa masih bingung dan ingin bertanya jangan sungkan ya, langsung saja tulis pertanyaan di kolom komentar. Sukses selalu untuk kita semua, jangan lupa di masa Pandemi Covid-19 ini jaga kebersihan, selalu cuci tanggan dan tetap #dirumah_aja agar Sobat dan orang-orang tercinta nggak tertular penyebaran Virus Covid-19. 

Share :