Tutorial Membuat Tombol Night Mode Dan Dark Mode Di blogger atau Blogspot Bagi seorang pengujung visitor kita tentunya pada suka Night Mode atau Dark Mode tentunya anda bisa memanjakan para visitor kalian semua, untuk membaca isi artikel anda biar enak di pandang dimata tidak akan terasa sakit dimata.
Tutorial Membuat Tombol Night Mode Dan Dark Mode Di blogger atau Blogspot
Kita Bisa menambahkan fitur ini semua bagi yang belum punya fitur isi anda bisa mengaturnya sendiri dengan cara ikuti cara admin Mboton Dev, Untuk penambahan tombol atau Swith.
Anda bisa menambahkan code CSS ini juga saya sudah saya terapkan di blog saya Mboton Dev jika kalian ingin menambahkan tombol swithnya bisa ikuti perintah dari saya di bawah ini.
Dengan Pemasangan Tombol Swith ini yang pasti lebih keren mempunyai 2 warna yaitu putih dan hitam anda juga bisa mengaturnya sesuai selera warna yang anda ingin pakai Night Mode Dan Dark Mode.
Code Tombol Swith ini sudah di tambahkan cookies secara otomatis jika pengujung kalian di kembali membuka website anda akan tetap ke mode yang hitam ketika memakai tombol swith yang warna hitam atau sebaliknya, jadi seorang pengujung tidak perlu repot” lagi untuk nombol lagi.
Tentuk Fitur ini sangat memudahkan untuk pembaca dan melihat semua artikel untuk di baca juga kelihatan nyaman dimata seorang pengujung anda semua, silakan ikuti tutorial di bawah ini Night Mode Dan Dark Mode.
Untuk Pemasangan CSS Tombol Swith Night Mode Dan Dark Mode
- Masuk Akun Gmail Google.
- Masuk Blogger.
- CSS Dan Java Script Night Mode.
- Pilih Template / Tema.
- Tempelkan Codenya Sebelum Code </head>.
<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:'';left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>kode .nightmode .class-baru{} .class-baru
Adalah kode yang bisa Anda gunakan untuk menambahkan element baru yang ingin di ikutkan pada saat menekan tombol night modenya. Silakan ubah kode dengan elemen class atau ID HTML yang ingin ikutkan menjadi night mode.
Misalanya pada contoh berikut:
.nightmode .popular-post h2{background:#222}
.nightmode .Post-body h1{color:#fff}
.nightmode .Post-body th {color:#555}Tutorial Membuat Tombol Night Mode Dan Dark Mode Di blogger atau Blogspot Tempelkan semua codenya di bawah ini Sebelum </body> atau bawahnya <body> kalau saya sendiri saya tempelkan di atas </body>.
<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>Jika anda sudah semua codenya yang di atas anda selanjutnya anda bisa melakukan untuk menaruh code tombol swithnya yang anda inginkan kalau saya tombol swithnya saya taruh atas dekat pencarian biar pengujung tahu juga itu tombol fungsinya gunanya untuk apa.
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}Untuk Pemasangan CSS Tombol Swith Night Mode Dan Dark Mode
Bagian Ini untuk pemasangan code Swith Dark Mode kalau yang di atas yaitu untuk pemasangan tombol Night Mode, anda bisa menerapkan sama aja yang di atas tadi.
Pastekan Code CSS Dark Mode ini sebelum:
]]</b:skin>
/* dark Mode*/
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;top:0;z-index:999;}
.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:'';}
.modedark svg path{fill:#fff;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.check{display:none;}
.modedark .iconmode .openmode{display:block;}
.modedark .iconmode .closemode{display:none;}
.modedark .check:checked ~ .iconmode .openmode{display:none;}
.modedark .check:checked ~ .iconmode .closemode{display:block;}
.Night{background:#0c0c0c;color:#fff;}
.Night #wrapper{background:#121212;color:#ddd;}
.Night #header-container{background:#000;color:#ddd;}
.Night #cssmenu ul ul li{background:#121212;}
.Night #cssmenu ul ul li a{color:#fff;background:#121212;}
.Night #cssmenu ul li{background:#000;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night .above-post-widget h2{color:#ddd;}
.Night .latest-post-title h2{color:#ddd;}
.Night h2.post-title a{color:#ddd;}
.Night h1.post-title{color:#ddd;}
.Night .sidebar h2{color:#ddd;}
.Night .sidebar-sticky h2{color:#ddd;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #ddd;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#ddd;}
.Night .artikel-terbaru a{color:#ddd;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#ddd;}
.Night .PopularPosts ul li a{color:#ddd;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-wrapperx{background:#000;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#ddd;}Tempelkan semua codenya di bawah ini Sebelum </body> atau bawahnya <body> kalau saya sendiri saya tempelkan di atas </body>.
<script>
//<![CDATA[
$(document).ready(function () {
$("body").toggleClass(localStorage.toggled),
$("#modedark").on("click", function () {
"Night" != localStorage.toggled ? ($("body").toggleClass("Night", !0), localStorage.toggled = "Night", $(".section-center").css("display", "block")) : ($("body").toggleClass("Night", !1), localStorage.toggled = "", $(".section-center").css("display", ""))
}),
$("body").hasClass("Night") ? $("#modedark").prop("checked", !0) : $("#modedark").prop("checked", !1)
});
//]]>
</script>Tambahkan kode HTML Untuk Night mode ini tepat diatas atau sebelum kode </header>
<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/><label class='iconmode' for='modedark'><svg class='openmode' viewbox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg><svg class='closemode' viewbox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg></label></div>Simpan Template/Tema
Night Mode Dan Dark Mode Untuk jenis SVG icon dark mode ini bisa diubah sesuai selera anda masing-masing. Silakan Anda berkreasi sendiri mau di taruh dimana tempat yang anda inginkan kalau saran saya di dekat pencarian.
Semoga anda bisa untuk menerapkan untuk pemasangan tombol swith dark mode dan Night Mode.
