bergabung di grup telegram kami

cara membuat dark mode atau mode gelap di blogspot / blogger

cara membuat dark mode atau mode gelap di blogspot / blogger
cara membuat dark mode atau mode gelap di blogspot / blogger

hallo semuanya selamat datang di blog baru kami, pada biasanya saya update artikel atau tutorial di situs utama saya di www.choipanwendy.com yang di mana kalian tau di situs utama saya bertema toko online, namun saya memutuskan untuk membuat situs atau blog ini untuk di pakai khusus saya mengupdate artikel atau tutorial. tentunya agar kalian para pembaca setia saya bisa lebih nyaman dan fokus dengan yang ingin kalian cari.

blog ini pun di buat pada tanggal 09 desember 2020 kemarin, untuk mengresmikannya pada postingan pertama di blog ini saya akan membagikan tutorial sederhana saja yaitu cara membuat dark mode atau mode gelap di blogspot. di sini saya menambahkan fitur Cookie agar saat kita refresh halaman yang sudah di aktifkan dengan dark mode tidak akan kembali ke mode awal meskipun kamu sudah berganti halaman

Kelebihan Memasang Dark Mode Di Blog

Seperti yang kita ketahui, saat ini sebagian besar orang menghabiskan banyak waktu untuk melihat layar perangkat digital mereka, baik itu smartphone atau pun dekstop. Dengan hadirnya dark mode ini, pengguna dapat mengistirahatkan mata yang lelah karena harus melihat layar yang terang.

Berdasarkan data yang diperoleh dari business2community.com, terlalu lama melihat layar yang terang dapat memberikan beberapa dampak seperti ketegangan mata, mata kering, pusing, dan lain-lain. jadi saya sangat mengrecomendasikan kamu untuk menambahkan fitur dark mode pada situs / blog kamu tentunya akan membuat pembaca kita nyaman juga.

sebelumnya pastikan template kalian sudah terdapat script jQuery, jika belum silakan pastekan kodenya di atas </head>


<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Cara Membuat Dark Mode Di Blogspot Dengan Cookie

pertama buka dasboard blogspot kalian klik tema dan klik tombol edit HTML tambahkan kode di bawah ini di atas kode </body>
<div class="Switchdark">
  <input
    class="toggledarkwendy toggledarkwendy-switch"
    id="darkmode"
    type="checkbox"
  />
  <label class="toggledarkwendy-btn" for="darkmode">
    <svg class='svg-1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M183.72453,170.371a10.4306,10.4306,0,0,1-.8987,3.793,11.19849,11.19849,0,0,1-5.73738,5.72881,10.43255,10.43255,0,0,1-3.77582.89138,1.99388,1.99388,0,0,0-1.52447,3.18176,10.82936,10.82936,0,1,0,15.118-15.11819A1.99364,1.99364,0,0,0,183.72453,170.371Z' transform='translate(-169.3959 -166.45548)'></path></g></svg>
    <svg class='svg-2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='5'/><line x1='12' x2='12' y1='1' y2='3'/><line x1='12' x2='12' y1='21' y2='23'/><line x1='4.22' x2='5.64' y1='4.22' y2='5.64'/><line x1='18.36' x2='19.78' y1='18.36' y2='19.78'/><line x1='1' x2='3' y1='12' y2='12'/><line x1='21' x2='23' y1='12' y2='12'/><line x1='4.22' x2='5.64' y1='19.78' y2='18.36'/><line x1='18.36' x2='19.78' y1='5.64' y2='4.22'/></svg></label>
</div>
<script type="text/javascript">
//<![CDATA[
// Dark Mode
$("#darkmode").click(function(){$("body").toggleClass("darkmode")}),$("body").toggleClass(localStorage.toggled),$("#darkmode").click(function(){"darkmode"!=localStorage.toggled?($("body").toggleClass("darkmode",!0),localStorage.toggled="darkmode"):($("body").toggleClass("darkmode",!1),localStorage.toggled="")});
//]]>
</script>

kemudian tambahkan css di bawah ini di atas kode </head>

<style type='text/css'>
/* Dark Mode */
.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.toggledarkwendy{display:none;}
.toggledarkwendy-btn{display:flex;align-items:center; width:26px;height:26px;}
.toggledarkwendy-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.toggledarkwendy-btn .svg-1{display:inline-block}
.toggledarkwendy-btn .svg-2{display:none}
.toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-1{display:none}
.toggledarkwendy-switch:checked + .toggledarkwendy-btn .svg-2{display:inline-block}
  
.darkmode{background:#1e1e1e;color:#fefefe}
.darkmode .toggledarkwendy-btn svg{stroke:#fefefe}
.darkmode .class-baru{}
.darkmode .class-baru{}
</style>

cara penlisan class baru harus di awali titik sedangkan untuk ID harus di awali #hastag, edit juga css bagian ini untuk menentukan posisi tombol dark modenya

.Switchdark{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

jika sudah silakan klik simpan dan lihat hasilnnya, sekian cara membuat dark mode atau mode gelap di blogspot / blogger, semoga bermanfaat dan terima kasih sudah berkunjung.

Baca juga :

9 komentar



image quote pre code
  1. DEAR please share your template.
    1. This template is not free
  2. Request dong gan, cara ganti button Dark Mode bawaan Median Ui v.1.4 jadi tombol Dark Mode yg dipake blog ini
    1. Tutorial sudah ada di blog median ui mas, bisa di cek
  3. Kalo mau ganti pake icon svg gimana mas code cssnya?
    1. sudah saya update menggunakan icon svg mas
    2. Okay mas, makasih ya
  4. mantul ini nih yang lagi saya cobain
    1. semoga bermanfaat
© 2020 - Wendy Code