Cara Membuat Mode Gelap atau Terang di blogspot/Blogger Dark Mode di blogspot Script

Selamat datang semua orang di blog baru kami,  biasanya kami memperbarui artikel atau tutorial di situs utama saya Think a Head, Anda tahu pelatihan yang relevan, tutorial dan juga unduh di situs utama saya, tetapi saya memutuskan untuk membuat website atau blog ini khusus untuk update artikel atau tutorial. Tentu saja, untuk membuat Anda, para pembaca setia saya, lebih nyaman dan fokus pada apa yang Anda cari.

Blog ini dibuat kemarin tanggal 25 Maret 2018. Untuk membuatnya resmi, saya akan membagikan tutorial sederhana di postingan pertama blog ini yaitu cara membuat dark mode atau mode gelap di blogspot. disini saya menambahkan fungsi cookie agar ketika anda me-refresh halaman yang diaktifkan dark mode tidak akan kembali ke keadaan semula walaupun anda mengganti halaman 

"Keuntungan memasang blog dark mode" 

 Seperti yang kita ketahui kebanyakan orang saat ini  menghabiskan banyak uang pencarian waktu di layar perangkat digital  baik itu smartphone atau desktop. Mode gelap ini memungkinkan pengguna untuk mengistirahatkan mata yang lelah karena  melihat layar yang terang. 
 Menurut informasi dari Business2community.com, melihat layar yang terang terlalu lama dapat memiliki beberapa konsekuensi seperti kelelahan mata, mata kering, pusing dan efek lainnya. jadi saya sarankan Anda untuk menambahkan fitur  mode gelap ke situs web / blog Anda, tentu saja itu juga akan membuat pembaca kami nyaman. 

-Kita masuk kedalam tutorialnya :

1. sebelumnya pastikan template anda sudah memiliki script jQuery, jika belum paste kode </head>

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

2. Cara Membuat Dark Mode Di Blogspot Dengan Cookie pertama buka dasboard blogspot kalian klik tema dan klik tombol edit HTML tambahkan kode dibawah ini taruh code ini diatas 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>

3. Kemudian tambahkan css dengan code di bawah ini code di taruh diatas 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 penulisan class baru harus di awali titik sedangkan untuk ID harus di awali #hastag, edit juga css bagian ini untuk menentukan posisi tombol dark mode-nya

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

Semoga membantu anda saya harap anda mau untuk mengikuti blog saya sekian dan terima kasih, jangan lupa always be creative dan terus belajar

Think a Head

subcriber • vidio

SUBSCRIBE •••

subscribe youtube channel saya juga ya teman terima kasih