Cara Membuat Tampilan Night Mode di Blog

Cara Membuat Tombol Dark Mode di Blog - Dark Mode atau biasa disebut Mode Malam ini rupanya bukan hanya bisa dipasang pada aplikasi seperti youtube, twitter, dan lain-lain saja, rupanya dark mode atau mode malam ini bisa juga Anda pasang pada blog Anda.

Bagaimana cara membuat atau memasang Dark Mode di blog? Nah, pada artikel ini Admin ingin membahas bagaimana cara memasang dark mode di blog.

Dalam tutorial memasang dark mode ini khusus buat pengguna template viomagz. bagaimana dengan template lain? coba saja, semoga berhasil tanpa kendala.

Baca juga: Cara Memasang Spoiler Keren di Blog

Jika Anda tertarik untuk membuat night mode diblog, silahkan ikuti tutorial dibawah.

Cara Memasang Tombol Dark Mode di Blog

Pertama-tama kalian harus membuka terlebih dahulu halaman Blogger > Tema > Edit HTML, lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>.

/* Night Mode infinityxsamz.com */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#cccccc}
.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

Sekarang tambahkan kode dibawah ini sebelum kode </body>.

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

Jika sudah, tambahkan kode tombol dark mode dibawah ini dimana saja sesuai keinginan Anda.

<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>

Jika sudah, klik Simpan template dan lihat hasil nya.

Mudah bukan cara membuat tampilan dark mode di blog? Sekarang blog Anda bisa menggunakan fitur night mode pada tampilan blog Anda.

Baca juga: Cara Membuat Efek Preloading Keren di Blog

Nah, seperti itulah cara membuat tombol dark mode di blog. Jika Anda suka dengan artikel ini, Anda bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Penutup

Terima kasih telah membaca artikel Cara Membuat Tombol Dark Mode di Blog, Semoga bermanfaat untuk kalian semua.