For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat mode dark gaya geser diblogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.