Tutorial Membuat Night Mode (Mode Gelap) di Blog seperti Mode Tonton

Template yang berwarna dominan terang seperti warna putih kadang membuat mata silau atau sakit ketitka membaca konten artikel tulisan di blog atau website. Hal ini jika dibiarkan terus-menerus akan membuat pengunjung blog tidak betah dan tidak tahan lama membaca konten blog.

Cara menambahkan fitur dark mode atau mode gelap sudah sangat populer di kalangan blogger yang berisi konten film atau video. Di situs nonton film, biasanya fitur mode gelap ini digunakan untuk mode tonton agar fokus layar hanya pada konten video atau filmnya saja.

Nah, dari sana inspirasi tulisan ini kami luncurkan. Cara membuat tombol di blog menjadi mode gelap atau dark mode di blog, berikut tutorial yang bisa kami bagikan untuk kamu.

Pertama, tentu kamu harus masuk ke halaman Edit HTML.

Kemudian ikuti langkah-langkah membuat mode gelap di blog...

1. Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* 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:#1e90ff}.Night .post-title {color:#1e90ff}.Night ul.nav-social {color:#1d2129}.Night .post-snippet {color:#cccccc}

2. Copy dan letakkan kode di bawah ini tepat di atas kode </body>

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

3. Terakhir adalah kode tombol mode malam atau gelap di blog, letakkan kode di bawah ini di tempat manapun yang kamu inginkan.