Hello sobat IcloudZer kali iniadmin bakalan memberika informasi mengenai blogger yakni dalam membahas bagaimana caranya membuat mode dark denga gaya geser yang keren
Info: Baiklah jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama okay
Gaya Geser
Setiap mode dark itu itu pasti memiliki gaya atau tampilan yang berbeda beda ya sobat, seperti khususnya pada mode dark yang sedang admin bahas kali ini, yang memiliki gaya geser untuk mengaktifkan dan menonaktifkan mode darknya
Contoh Tampilan
Baiklah untuk memperlengkap artikel kita kali ini, admin akan memberikan sebuah contoh tampilan mengenai mode dark tersebut, gunakan tombol dibawah ini untuk langsung melihatnya
Info: Bagaiamana sobat dengan tampilannya keren bukan dan karena setiap template itu berbeda beda maka tampilannya juga bisa berbeda beda ya sobat
Cara pembuatan
Baiklah kita akan masuk kecara pembuatan bagaiamana sih caranya membuat tombol mode dark dengan gaya geser, yuk sama sama kita bahas
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkannya diatas kode ]]><b:skin>
.coolDrkModeByRah{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;flex-direction:row-reverse;align-items:center;justify-content:flex-end;margin:13px 0!important;transition: all .3s ease;}
.coolDrkModeByRah .gelap{display:none}
.coolDrkModeByRah .icon:hover::before{padding:0!important;width:40px;height:40px}
.coolDrkModeByRah .check:checked ~ .gelap{display:inline-block}
.coolDrkModeByRah .check:checked ~ .ganti{display:none}
.ganti span {color:#333}
.coolDrkModeByRah .icon{background-color:#86d993;position:absolute!important;right:3px;outline:0;width:40px;height:10px;padding:0!important;cursor:pointer;border-radius:100px;transition:all .3s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.coolDrkModeByRah .icon:after,.coolDrkModeByRah .icon:before{content:'';background-color:transparent;position:relative;display:block;width:50%;height:100%}
.coolDrkModeByRah .check:checked + .icon{background-color:#657786}
.coolDrkModeByRah .icon:after{position:absolute;width:24px;height:24px;top:-7.5px;left:0;transition:left .3s cubic-bezier(0.175,0.885,0.32,1.275),padding .3s ease,margin .3s ease;box-shadow:rgba(0,0,0,0.5) 0 1px 3px;border-radius:100px;transition:all .15s ease;background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='%2386d993'/%3E%3C/svg%3E") center / 17px no-repeat}
.coolDrkModeByRah .icon:hover::after{box-shadow:rgba(0,0,0,0.5) 0 1px 3px,rgba(0,0,0,0.1) 0 0 0 10px}
.coolDrkModeByRah .check:checked + .icon:after{left:40%;background:#1d2129 url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat}
.coolDrkModeByRah .icon:hover ~ div svg path{fill:#f80000}
.coolDrkModeByRah .icon:after{width:20px;height:20px;top:-6.5px}
.coolDrkModeByRah .icon{width:35px;height:8px}
.coolDrkModeByRah .icon:after{display:block}
.coolDrkModeByRah .icon:hover::after{box-shadow:rgba(0,0,0,0.5) 0 1px 3px,rgba(0,0,0,0.1) 0 0 0 7px}
.coolDrkModeByRah .check:checked + .icon:after{left:45%}
.dark-mode .coolDrkModeByRah .icon:hover::after{box-shadow:rgba(150,150,150,.5) 0 1px 3px,rgba(150,150,150,.1) 0 0 0 7px}
.coolDrkModeByRah .icon{background-color:#86d993;right:17px}
.coolDrkModeByRah .check:checked + .icon{background-color:#667786}Info: Kamu juga bisa meletakkan kode CSS diatas menggunakan tag style
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini kemudian kamu bisa meletakkannya sesuai keinginan kamu aja
<li class='coolDrkModeByRah'>
<input class='check' id='coolDrkByRah' type='checkbox'/>
<label class='icon' for='coolDrkByRah'/>
<div class='ganti'>
<svg viewBox='0 0 24 24'><path d='M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z'/></svg><span>Mode Dark</span>
</div>
<div class='gelap'>
<svg viewBox='0 0 24 24'><path d='M12,2C9.76,2 7.78,3.05 6.5,4.68L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z'/></svg><span>Seperti mati Lampu</span>
</div>
</li>Info: Kode HTML diatas berfungsi untuk menampilkan Tampilan Mode darknya
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah menempelkan kode Javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<script type='text/javascript'>//<![CDATA[$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#coolDrkByRah").on("click",function(){"darkMode"!=localStorage.toggled?($("body").toggleClass("darkMode",!0),localStorage.toggled="darkMode",$(".section-center").css("display","block")):($("body").toggleClass("darkMode",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("darkMode")?$("#coolDrkByRah").prop("checked",!0):$("#coolDrkByRah").prop("checked",!1)});//]]></script>Info: Kode javascript diatas berfungsi untuk menampilkan kode mode dark
