Bagaimana cara membuat darg mod pada blog, Pastinya kita sebagai pmeilik blog ingin memberikan kenyamanan bagi pengunjug blog kita terutama buat orang yang sering menelusuri blog malam hari, nah disini saya akan membagikan tutorial cara membuat dark mode di blog.
Fitur mode malam malam ini adalah untuk memberikan kenyamanan bagi pengunjung blog dan fitur mode malam ini juga tidak akan merusak mata pengunjung blog kita sehingga dapat memberikan kesenangan dan kenyamanan bagi pengunjung.
Jadi bagaimana caranya untuk membuat fitur mode malam?
Ikuti tutorial yang saya berikan dan perhatikan caranya secara mendetail agar tidak terjadi kesalahan pada script blog kalian.
1. Masuk ke halaman blogger
2. Pilih Themes/tema
3. Pilih edit HTML
4. Kalian klik Ctrl+F untuk memunculkan kotak pencarian kemudian kalian cari kode ]]></b:skin>
5. Kalian pastekan kode CSS dibawah ini
6. Kemudian pastekan kode javascript dibawah ini tepat di atas kode </body>
7. kemudian kalian bisa taruh kode html dibawah ini ditempat yang kalian inginkan
Kalian bisa taruh kode di atas di antara kode dibawah
Untuk demo contohnya seperti blog aya
Sekian tutorial dark mode atau Mode malam dari saya semoga bermanfaat buat kalian para blogger dan terimakasih sudah menyempatkan diri untuk mampir ke website ini jangan lupa kunjungi halaman lainnya.
Thanks.
body { margin: 0; padding: 0; font-family: sans-serif; transition: 0.5s; } body.night { background: #00151f; } .toggle { position: absolute; top: 40px; right: 50px; background: #fff; border: 2px solid #00151f; width: 45px; height: 20px; cursor: pointer; border-radius: 20px; transition: 0.5s; } .toggle.active { background: #00151f; border: 2px solid #fff; } .toggle:before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #00151f; border-radius: 50%; transition: 0.5s; } .toggle.active:before { left: 27px; background: #fff; } .content { margin: 100px auto; width: 1000px; } .content h1 { margin: 0 0 20px; padding: 0; color: #000; transition: 0.5s; } .content p { margin: 0; padding: 0; color: #000; transition: 0.5s; font-size: 18px; } body.night .content h1, body.night .content p { color: #fff; } {codeBox}
6. Kemudian pastekan kode javascript dibawah ini tepat di atas kode </body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.toggle').click(function(){ $('.toggle').toggleClass('active') $('body').toggleClass('night') }) }) </script>{codeBox}
7. kemudian kalian bisa taruh kode html dibawah ini ditempat yang kalian inginkan
<div class="toggle"></div>{codeBox}
Kalian bisa taruh kode di atas di antara kode dibawah
<body> ... ... </body>{codeBox}
Untuk demo contohnya seperti blog aya
Sekian tutorial dark mode atau Mode malam dari saya semoga bermanfaat buat kalian para blogger dan terimakasih sudah menyempatkan diri untuk mampir ke website ini jangan lupa kunjungi halaman lainnya.
Thanks.
Wah tutorialnya sangat membantu untuk saya yang masih pemula gan,trimakasih.
Kumpulan tips dan tutorial blogger untuk pemula dengan bahasa pemnyampaian yang mudah diterima dan mudah dimengerti. Mari berkunjung disiniwww.faronesia.com
Gan gimana agar ketika di refres tetep mods males kecuali di klik lagi baru kembali ke mode pagi apa yg harus di ubah gan?
Segera saya akan buatkan utorialnya
Templatenya mantap, Terima Kasih tutorialnya