Membuat atau memasang tombol dark mode pada blogger menggunakan CSS versi iqniel sudah pernah saya buatkan tutorialnya , namun kali ini sedikit berbeda yaitu dengan tambahan night mode class baru..
Yang nantinya bisa diisi dan disesuaikan dengan template blogger yang anda gunakan.
Tombol dark mode yang berfungsi untuk mengubah tampilan misal dari putih ke hitam , terkadang memang sangat diperlukan pada sebuah blog , supaya tampilanya menjadi lebih keren dan menarik.
Selain itu juga dapat membuat pengunjung merasa nyaman.
Kemungkinan besar jika seorang pengguna mengunjungi situs web anda di waktu malam hari lebih memilih thema night mode agar pembaca tidak merasa sakit mata.
Maka dari itu kita seorang blogger harus menggunakan template blogger yang memiliki fitur dark mode , kalaupun tidak ada , anda bisa menambahkan sebuah tombol dark mode pada template blogger milik anda.
Untuk menambahkan fitur dark mode pada template bloger tidak lah rumit , asalkan kita mempunyai sebuah kode yang diperlukan , seperti CSS ,dan JavaScript nya..
Kode tersebut bisa di pasang di bagian edit HTML template anda.
Sedangkan untuk bagian tombol dark mode nya kita perlu memahami susunan template blogger milik anda , supaya nantinya tombol dark mode bisa muncul di bagian yang kita sesuaikan , misal di bagian header samping tombol search , atau juga di bagian Menu , atau juga SubMenu ,, carilah di bagian susunan html template .
Cara Menempatkan Tombol Dark Mode Pada Blogger.
Ikuti langkah berikut supaya bisa berjalan dengan sempurna :
1. Buka Akun Blogger.
2. Pilih "Thema" edit HTML.
3. Setelah masuk dalam mode edit html , lalu sobat masukan kode berikut ini dengan benar..
Langkah langkah :
Cari kode </head> lalu taruh kode ini tepat diatasnya..
/* westoiku */
<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>
.nightmode .clas-baru{}
Adalah tempat yang bisa anda gunakan untuk menambahkan elemen baru yang ingin di ikutkan saat menekan tombol night mode ..
Silahkan anda ubah kode dengan Elemen Class atau Id HTML.
Misalkan :
/* westoiku */
.nightmode .popular-post h2{background:#222}
.nightmode .Post-body h1{color:#fff}
.nightmode .Post-body th {color:#555}
Lalu tempelkan kode di bawah ini tepat di atas kode </body>
/* westoiku */
<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>
Langkah selanjutnya adalah tinggal menempatkan kode tombolnya ,, terserah anda mau pasang dibagian mana..
Cocok nya sih di taruh di bagian header , biar pengunjung bisa dengan mudah menggunakan tombol tersebut.
Salin kode ini :
/* westoiku */
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
Pemasangan Kode CSS Untuk Tombol Swith.
Cari kode ]]></b:skin> lalu taruh kode ini tepat diatasnya..
/* westoiku */
/* 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;}
Selanjutnya cari kode </body> lalu taruh kode dibawah ini tepat diatasnya :
/* westoiku */
<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>
Terakhir tambahkan kode dibawah ini di bagian kode </header>
/* westoiku */
<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>
Pemasangan tombol night mode dan dark mode pada template blogger sudah siap dan berhasil.
Yuk share :
Post a Comment