Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog

Mengaktifkan mode malam di halaman blog - Bagi anda yang seorang blogger dan sangat memperhatikan fitur-fitur yang di perlukan oleh pengunjung adalah sifat yang bagus untuk mempertahankan pengunjung untuk membaca lebih lama. maka dari itu anda salah satu fitur yang bernama drak mode (Mode Malam).

Kenapa anda memerlukan fitur tersebut ? karena pengunjung anda tidak tau saat membaca artikel aktifitas malam atau siang hari. sebagai orang yang teliti anda harus memikirkan sebagai seorang pengunjung agar saat membaca tidak melelahkan mata mereka dan menghindari mata ber air.

Lihat Juga : Cara Memasang Progress Scrollbar Pure Javascript

Coba anda pikirankan, blog anda terlalu banyak warna yang kinclong, pasti pengunjung akan merasa terganggung dengan warna campuran yang anda edit dan tidak enak di pandang mata.

DEMO

Cara Memasang Drak Mode Di Blog

1. Theme > Edit HTML, cari ]]></b:skin>, agar mudah CTRL + F.
2. Salin CSS di bawah ini, letakkan di atas ]]></b:skin>.

/* SuryaPero Night Mode */
.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}

3. Cari </body>, lalu letakkan javascript di atas </body>

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

4. Selanjutnya, letakkan tombol Malam/Siang, sesuai keinginan anda. pada tutorial ini saya akan memasangnya di nav bar saya seperti di gambar.

Letak HTML di bawah sesuai keinginan anda.

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

Lihat Juga : Cara Membuat Sitemap Otomatis Di Blog

Demikianlah, cara membuat tombol drak mode di dalam blog/website. semoga bermanfaat untuk anda.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :