-->

Cara membuat dark mode pada blog

dark mode pada blog

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

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.
Previous Post

5 Comments

  1. Faronesia official

    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

  2. Hartomy okta

    true

  3. @Aceng

    Gan gimana agar ketika di refres tetep mods males kecuali di klik lagi baru kembali ke mode pagi apa yg harus di ubah gan?

    Replay
  4. Admin

    Templatenya mantap, Terima Kasih tutorialnya

Post a Comment

Berkomentarlah secara wajar dan sesuai dengan topik didalam artikel, jangan mengirim link spam pada kolom komentar.

Post a Comment (5)

Ad Blocker Detected

Tolong matikan adBlock anda karena hanya iklan yang membuat kami semangat menulis