Cara Menambah Fitur Dark Mode di Blogger

Fitur dark mode saat ini tersedia di banyak aplikasi dan fitur smartphone. Hal ini bukan tanpa alasan, karena fitur dark mode atau mode gelap ini sangat nyaman ditangkap oleh mata apabila kondisi sedikit pencahayaan.

Mulai penyedia aplikasi semacam whatsapp, twitter hingga pabrikan smartphone semacam samsung dan apple pun memberikan fitur mode gelap ini. Hal ini membuktikan bahwa fitur dark mode ini cukup penting bagi kenyamanan pengguna

Tentu kalian para pemilik blog tidak salah apabila kalian menanyakan bagaimana cara menambahkan fitur dark mode di bloger ? Apalagi dengan adanya fitur dark mode atau mode gelap ini bertujuan untuk memberikan rasa nyaman para pengunjung di blog kalian

Seperti kalian, Penggunaan internet di malam hari juga cukup banyak apalagi beberapa provider internet memberikan kouta khusus malam hari. Tentunya kalian harus memberikan rasa nyaman kepada para pengunjung blog atau website kalian. Hal inilah yang membuat fitur dark mode sendiri cukup penting buat kalian para pemilik blog ataupun website

Belajarinfo.com juga tidak mau ketinggalan dalam menambahkan fitur darkmode di website ini. Dark mode versi website belajar info ini terdapat  tombol on/off yang memudahkan para pengunjung untuk mengatur tampilannya sendiri. Bagi kalian yang ingin menambahkan fitur darkmode yang sama seperti di website kami, silahkan ikuti langkah langkah dibawah ini :

Cara Menambah Fitur Mode Gelap di Blogger

Login aku blogger kalian dan edit tema kalian melalui Tema lalu Edit HTML. Sebelum kalian edit html, alangkah baiknya kalian backup tema terlebih dahulu dengan cara cadangkan/pulihkan dan download tema kalian

salin code css dibawah ini

<style>
/* DARK MODE [belajarinfo.com]*/
.switch {position:relative;display:inline-block;width:60px;height:20px}
.switch input {display:none;}
.slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;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:#000}
input:focus + .slider {box-shadow: 0 0 1px #2196F3}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px)}
.slider.round {border-radius:20px}
.slider.round:before {border-radius:50%}
.Night
{background-color:#000!important}
.Night #wrapper,
.Night #post-wrapper article
{background-color:#1d2129!important}
.Night #header .title,
.Night #header .title a,
.Night #header .description,
.Night #post-wrapper article
 {color:#E0E0E0!important}
</style>

Taruh code tersebut tepat dibawah ]]></b:skin>

Salin code dibawah ini dan taruh diatas </body>.

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

Jika sudah Pratinjau tema kalian, apabila tidak ada masalah silahkan simpan tema tersebut.

Tambahkan code dibawah ini dengan cara buka dashboard Tata Letak lalu atur tombol dark mode akan ditaruh dimana, setelah itu pilih tambah gadget > HTML/Javascript. 

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

Simpan tata letak, lalu kunjungi blog kalian

Itulah cara menambah fitur dark mode di blogger kalian. Apabila fitur dark mode tersebut tidak bekerja. hal ini dikarenakan kode cms tema kaliian tidak mendukung cara ini. Silahkan hubungi penyedia tema bloger kalian apabila kalian masih ingin menambahkan fitur ini

Apabila kalian ingin bertanya ataupun saran silahkan komentar dibawah. Selamat mencoba

Subscribe to receive free email updates: