Untuk article hari ini saya akan berbagi tutorial sederhana, yang merupakan cara membuat mode gelap atau mode gelap pada blogspot. Di sini saya menambahkan fungsi cookie sehingga ketika kami memperbarui halaman yang telah diaktifkan dengan mode gelap, itu tidak akan kembali ke mode awal, meskipun halaman telah berubah.
Kelebihan Memasang Dark Mode Di Blog
Seperti yang kita ketahui, saat ini kebanyakan orang menghabiskan banyak waktu, menonton layar perangkat digital Anda, baik smartphone atau desktop. Dengan kehadiran mode gelap ini, pengguna dapat mengistirahatkan mata mereka yang lelah karena mereka harus melihat layar yang cerah.
Berdasarkan data yang diperoleh dari Business2Community.com, terlalu banyak waktu untuk melihat layar cerah, itu dapat memberikan beberapa dampak, seperti ketegangan okular, mata kering, pusing dan lainnya. Jadi saya sangat menyarankan Anda menambahkan fungsi dengan cara gelap di situs / blog Anda, tidak diragukan lagi, pembaca kami juga merasa nyaman.
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="toggledarkfahmi toggledarkfahmi-switch"
id="darkmode"
type="checkbox"
/>
<label class="toggledarkfahmi-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}
.toggledarkfahmi{display:none;}
.toggledarkfahmi-btn{display:flex;align-items:center; width:26px;height:26px;}
.toggledarkfahmi-btn svg{fill:none!important;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.toggledarkfahmi-btn .svg-1{display:inline-block}
.toggledarkfahmi-btn .svg-2{display:none}
.toggledarkfahmi-switch:checked + .toggledarkfahmi-btn .svg-1{display:none}
.toggledarkfahmi-switch:checked + .toggledarkfahmi-btn .svg-2{display:inline-block}
.darkmode{background:#1e1e1e;color:#fefefe}
.darkmode .toggledarkfahmi-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}