Fitur Dark Mode Dengan Tombol Pada Blogspot | blogger
.png)
1. Buka Dashboard dan edit template blog melalui Tema > Edit HTML. Jangan lupa sebelum memulai Backup template terlebih dulu.
2. Copy paste kode CSS berikut tepat di bawah ]]></b:skin>.
3. Selanjutnya salin kode Javascript di bawah ini dan taruh di atas </body>.
4. Jika sudah maka Simpan Tema yang telah dimodifikasi. Lalu beralih ke Tata Letak dan salin kode HTML berikut.
5. Kode tersebut adalah tombol switch on/off yang nantinya dapat digunakan untuk mengganti tema normal ke mode malam. Boleh diletakkan dimana saja tapi untuk praktisnya pasang dalam Gadget melalui Tata Letak > Tambah Gadget > HTML/Javascript.
2. Copy paste kode CSS berikut tepat di bawah ]]></b:skin>.
<style> /* DARK MODE [syamsalabim.blogspot.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>
3. Selanjutnya salin kode Javascript di bawah ini dan taruh di atas </body>.
<script>//<![CDATA[ $("#Night").click(function(){ $("body").toggleClass('Night'); }); //]]></script>
4. Jika sudah maka Simpan Tema yang telah dimodifikasi. Lalu beralih ke Tata Letak dan salin kode HTML berikut.
<label class='switch' for='Night'> <input id='Night' type='checkbox'/> <div class='slider round'/></label>
5. Kode tersebut adalah tombol switch on/off yang nantinya dapat digunakan untuk mengganti tema normal ke mode malam. Boleh diletakkan dimana saja tapi untuk praktisnya pasang dalam Gadget melalui Tata Letak > Tambah Gadget > HTML/Javascript.
add your message to every single do comment here!