Cara Pasang Night Mode Dengan Toggle Button di Blog

Cara Pasang Night Mode Dengan Toggle Button di Blog

Cara membuat tombol switch mode malam (night mode) di bogger

Entahlah mengapa beberapa waktu ini lagi trend banget pengguna blogger memasang night mode di blog mereka.

Ya itu hal yang lumrah lah untuk di lakukan, mengingat saat ini kebanyakan layanan digital juga sudah menyematkan fitur night mode.

Jadi tidak ada salahnya jika Anda memasang fitur mode malam ini di blog.

Walaupun, sebagian orang beranggapan bahwa night mode ini bukan merupakan sesuatu hal yang penting.

Itu balik lagi ke diri Anda masing-masing, jika merasa night mode adalah hal berguna silahkan pasang, namun jika tidak ya jangan di pasang hehe.

Secara garis besar, night mode atau mode malam ini berfungsi untuk memberikan kenyamanan pada pembaca saat mereka melihat artikel Anda di dalam kondisi minim cahaya.

Jadi mata tidak akan cepat lelah.

Jika Anda tertarik ingin memasangnya, mode malam yang Saya bagikan ini menggunakan tombol toggle switch, tentunya akan menambah nilai plus dari segi tampilan blog Anda.

Seperti apa bentuknya?, silahkan Anda lihat di bagian Preview.

Juga tidak kalah pentingnya bahwa mode gelap di blogger ini sudah dilengkapi dengan sistem Chookies, artinya saat dinyalakan walaupun halamannya Anda refresh tidak akan kembali ke tampilan normal.

Kecuali Anda matikan kembali modenya. Hal ini juga berlaku jika suatu saat Anda kembali ke blog yang menerapkan night mode sistem Chookies, dan Anda mengaktifkannya, blog itu tetap dalam kondisi mode gelap menyala.


Ya seperti itu lah, Saya juga binggung mau menjelaskan lebih detail lagi. Yang mau gelap-gelapan bareng night mode di blognya, silahkan di coba sendiri.

Preview

Cara Memasang Mode Malam di Blogger dengan Tombol Switch


Ingat, sebelum mengganti atau menambah kode di template usahakan untuk Backup dulu theme Anda.

1. Seperti biasa, masuk ke menu Template lalu klik edit html.

2. Letakan HTML di bawah ini di atas kode </header>

<div class="smarthbtn">
<input class="togglenight togglenight-switch" id="modedark" type="checkbox" />
<label class="togglenight-btn" for="modedark" title="Mode Dark"></label></div>

3. Kemudian letakan CSS tombol toggle dan mode malamnya di bawah ini tepat di atas </style> atau </b:skin>

/* Warna Mode Malam */
.Night body {background:#202125} .Night #wrapper{background:#202125}.Night #HTML3{background:#202125}.Night .share-this-pleaseeeee{background:#202125}.Night .related-post h4{background:#202125}.Night #label-info-th{background:#202125}.Night .post-body{color:#ccc}.Night #baca-juga h2{color:#ccc;background:#202125}.Night .label-info-th a{color:#ccc;background:#3d4658}.Night li.recent-posts a{color:#ccc}.Night .recent-posts-title h2{color:#ccc}.Night .widget-content{color:#ccc;background:#202125}.Night .post-info{color:#ccc}.Night h2.post-title a{color:#9e9e9e}.Night h2.post-title a:hover{color:#eee}.Night .post-title{color:#9e9e9e}.Night ul.nav-social{color:#202125}.Night .post-snippet{color:#ccc}.Night #Label1{background:#202125}.Night .blog-posts .post-outer .post{background:#202125;border-bottom-color:#252a33}.Night .PopularPosts h2{background:#202125}.Night .latest-post-title h2{background:#202125;border-bottom-color:#313640}.Night .newspaptext{color:#9e9e9e}.Night .PopularPosts h2 span{color:#9e9e9e}.Night .list-label-widget-content ul li{border-bottom-color:#313640}.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,#313640 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}.Night .comments .comment-block {background:#12161f}.Night #header-container{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .comments .comment-block{background:#12161f}.Night #header-wrapper{background:rgba(32, 33, 36,.95);background-image:linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));box-shadow:0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2)}.Night .sidebar h2{color:#b7b7b7}.Night .sidebar-sticky h2{color:#b7b7b7}.Night .latest-post-title h2{color:#b7b7b7}.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}.Night .comments h3{color:#b7b7b7;}.Night .breadcrumbs a{color:#eee}.Night .btnsocialshare{background:#383c44}.Night .label-line::before{background:#202125}.Night .label-line-c::before{background:#333740}.Night a.showcontent:hover{background:#373a42}.Night a.showcontent{background:#202125} .Night .comments .comments-content .comment-content{color:#fff}.Night div#Label1 h2{border-bottom:1px solid #eee;background:#202125}.Night .related-post-style-3 .related-post-item-title{color:#bbb}.Night #baca-juga ul{border:2px solid #eee}.Night #comments a.hiddencontent{background:#424854}.Night .comments .comments-content .comment-thread ol{background:#202125}.Night .comments .comments-content .inline-thread{background:#202125}.Night.displaypageNum a,.showpage a,.pagecurrent, #blog-pager-newer-link a, #blog-pager-older-link a {color:#eee;background:transparent;border:1px solid #eee}
.Night .label-size{color:#eee;border:1px solid #eee}
.Night .post-bottom a,.post-label a{color:#eee}
/* Toggel */
.smarthbtn{position:absolute;right:50px;top:4px;height:40px;line-height:40px;text-align:center;display:inline-block;align-items:center;z-index:10}
.togglenight{display:none;} .togglenight + .togglenight-btn{outline:0;display:inline-block;width:35px;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:#888;border-radius:99em;transition:all .4s ease} .togglenight-switch + .togglenight-btn:after{content:'';border-radius:100px;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='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;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);background-color: #333;}

.togglenight-switch:checked + .togglenight-btn{background:#888} .togglenight:checked + .togglenight-btn:after{content:'';left:50%;background:#222 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;background-color:#333;}

4. Agar tombol toggle nya dapat di gunakan, taruh Script ini di bawah kode </body>

<script>
//<![CDATA[
// Smarth Toggle
toggleClass("modedark")}),$("body").toggleClass(localStorage.toggled),$("#modedark").click(function(){"modedark"!=localStorage.toggled?($("body").toggleClass("modedark",!0),localStorage.toggled="modedark"):($("body").toggleClass("modedark",!1),localStorage.toggled="")});
//]]>
</script>
<script>
//<![CDATA[
// Malam Kelabu
$(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>

5. Simpan dan selesai.

Keterangan Lebih Lanjut Mengenai Dark Mode:


Silahkan ganti bagian CSS yang saya tadai dengan keinginan Anda.

Jangan lupa, Anda harus menyesuaikan CSS warna mode malam di setiap Class atau ID pada template Anda.

karena CSS warna mode gelap ini hanya mencakup beberapa elemen saja dan struktur setiap template berbeda, sehingga Anda perlu sesuaikan sendiri.

Jika ada beberapa elemen yang tidak gelap saat mode dark nya dinyalakan, artinya Class atau ID template Anda tidak ada di CSS warna mode malamnya.

Jadi Anda perlu menambahkannya sendiri di bagian CSS-nya. Caranya sangat mudah, Anda hanya perlu inspect element template bagian yang tidak terkena warna CSS mode gelapnya dan cari tau nama Class atau ID-nya.

Jika sudah tau, tambahkan Class .Night di depan Class atau ID template Anda tadi. Saya contohkan, misalnya saya ingin membuat footer saya saya menjadi warna gelap saat Night modenya dinyalakan.

Lalu Saya akan mencari tau nama Class yang ada di footer tersebut dengan cara Inspect element. Ternyata nama Class nya adalah .footer-wrapper, lalu saya menambahkan .Night di depan .footer-wrapper dan memberikan warna pada backgroundnya sehingga menjadi seperti di bawah ini.


.Night .footer-wrapper {
background:#202125;
color:#FFF;

}

/* CSS ini artinya membuat warna background footer menjadi gelap dan warna tulisan yang ada di footer menjadi berwarna putih */

Jika sudah, lalu salin dan pas ke bagian CSS Warna Dark Mode yang sudah saya bagikan sebelumnya.

Gimana, bingung kan.. Jika masih sangat awam mengenai CSS dan HTML memang cukup merepotkan, nantinya juga Anda terbiasa.

Demikian pembahasan kali ini, jika tidak paham jangan malu untuk menanyakannya di kolom komentar.

Share
Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel