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).
mode malam berguna untuk menyamankan mata saat membaca artikel pada malam hari
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.

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.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel