Dark mode atau mode malam adalah tampilan halaman berwarna hitam yang dibuat untuk pengguna agar merasa nyaman ketika membuka halaman blog kita dimalam hari.
Berbeda dengan tampilan blog pada biasanya yang identik berwarna putih, nah dark mode ini identik berwarna hitam.
Walaupun identik berwarna hitam tapi tampilan halaman blognya tetap enak dipandang dan lebih nyaman dilihat ketika malam hari.
Pada tutorial atau panduan kali ini Panduan Blogger akan membuat dark mode di blog dengan menggunakan tombol otomatis agar bisa merubah tampilan blog seketika, dari tampilan blog normal ke tampilan dark mode dan sebaliknya dari tampilan dark mode ke tampilan normal.
Dark mode di blog yang akan Panduan Blogger bagikan juga sudah dilengkapi dengan cache jadi ketika kita mengubah tampilan blog kita menjadi dark mode dan ketika pindah ke halaman baru setingan dark modenya masih berfungsi.
Berbeda dengan dark mode yang tanpa cache ketika pindah ke halaman baru maka dark mode-nya kembali ke tampilan normal lagi, sedangkan dark mode dengan cache walaupun sudah pindah ke halaman baru tampilannya tetap tidak kembali ke tampilan normal, dan untuk kembali ke tampilan normal cukup dengan mengklik tombol dark mode-nya lagi maka tampilan blog akan kembali normal.
Jadi ketika sudah dalam dark mode atau mode malam selama tombol dark mode-nya tidak diklik lagi maka tampilan blog kita tetap pada dark mode atau mode malam.
Bagaimana sangat menarik bukan?, oleh sebab itu ikuti baik-baik tutorial cara membuat dark mode di blog dibawah ini.
Cara Membuat Dark Mode Di Blog Dengan Cache Terbaru
Untuk langkah awal cara membuat dark mode di blog dengan cache terbaru kamu harus membuka mode edit HTML template blogger masing-masing.
Javascript Dark Mode Di Blog
Jika sudah dibuka mode edit HTML template bloggernya kemudian kamu cari kode </body> letak kodenya bisanya ada dibagian paling bawah template diatas kode </html>
Jadi kode </body> terletak di baris kedua dari paling bawah template blogger.
Jika sudah ketemu selanjutnya kamu tambahkan Javascript berikut ini diatas kode </body>.
<script>//<![CDATA[
$("#modepanduancode").click(function(){$("body").toggleClass("modepanduancode")}),$("body").toggleClass(localStorage.toggled),$("#modepanduancode").click(function(){"modepanduancode"!=localStorage.toggled?($("body").toggleClass("modepanduancode",!0),localStorage.toggled="modepanduancode"):($("body").toggleClass("modepanduancode",!1),localStorage.toggled="")});
//]]></script>
CSS Dark Mode Di Blog
Kemudian save dulu templatenya, lalu cari lagi kode </style>, nah karena diblog kode </style> biasanya lebih dari satu maka ada triknya yaitu cari saja kode CSS yang paling panjang jika ketemu nah pilih kode </style> dari CSS yang paling panjang tersebut.
Setelah itu tambahkan kode CSS untuk dark mode-nya tepat diatas kode </style>, nah untuk kode css dark mode ini sesuaikan dengan class property dari bagian-bagian blog kamu yang ingin dirubah tampilannya menjadi warna hitam.
Untuk kode yang saya pakai pada blog www.panduancode.com seperti kode CSS dibawah ini.
.tgl {display: none;}.tgl + .tgl-btn {outline: 0;display:inline-block;width: 40px;height: 10px;position: relative;cursor: pointer;margin-left:5px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select:none;}.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {position: relative;display: block;content: "";width: 50%;height: 100%;}.tgl:checked + .tgl-btn:after {left: 50%;background:#000000;}.tgl-panduan + .tgl-btn {background: #1ca1f2;border-radius: 100px;transition: all.4s ease;}.tgl-panduan + .tgl-btn:after {border-radius: 100px;background: #000000;transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);position: absolute;width: 20px;height: 20px;top: -5px;left: 0px;}.tgl-panduan:checked + .tgl-btn {background: var(--color-hover);} .modepanduancode{background:#15202B!important}.modepanduancode .post{background:#213040!important}.modepanduancode .post-body{color:#fff!important}.modepanduancode .post-title{color:#fff!important}.modepanduancode .breadcrumbs{color:#fff!important}.modepanduancode .breadcrumbs a{color:#fff!important}.modepanduancode div.Label{background:#213040!important}.modepanduancode .pinned-post-title a{color:#fff!important}.modepanduancode .sidebar h2{color:#fff!important}.modepanduancode .Profile .profile-name-link{color:#fff!important}.modepanduancode .sidebar-sticky h2{color:#fff!important}.modepanduancode .post-title a{color:#fff!important}.modepanduancode .post-label a{color:#fff!important}.modepanduancode .post-info{color:#fff!important}.modepanduancode .g-profile{color:#fff!important}.modepanduancode .post-info a{color:#fff!important}.modepanduancode .comments h3{color:#fff!important}.modepanduancode .comments .comments-content .datetime a{color:#fff!important}.modepanduancode .pinned-post-body{color:#fff;background:#213040!important}.modepanduancode .footer-widget .widget{background:#15202B!important}.modepanduancode .comments.comments{color:#fff;background:#213040!important}.modepanduancode .post-container{border:1px solid #fff;background:#15202B!important}.modepanduancode .tr_bq{color:#fff;background:#213040!important}.modepanduancode .comment{color:#fff;background:#213040!important}.modepanduancode .continue{color:#fff;background:#213040!important}.modepanduancode .comments .comments-content .comment-thread ol{background:#213040!important}.modepanduancode .pinned-title span{color:#fff;background:#213040!important}.modepanduancode .latest-post-title h2 span{color:#fff;background:#213040!important}.modepanduancode .little-side-winder h2 span{color:#fff;background:#213040!important}.modepanduancode .translate{color:#fff;background:#15202B!important}.modepanduancode .comments .comments-content .inline-thread{color:#fff;background:#213040!important}.modepanduancode .related-post-style-3 .related-post-item-title{color:#fff;background:#213040!important}.modepanduancode .share-this-pleaseeeee{color:#fff;background:#213040!important}.modepanduancode .related-post h4{color:#fff;background:#213040!important}.modepanduancode .disqus_thread{color:#fff;background:#213040!important}
Untuk kode CSS berikut ini .modepanduancode{background:#15202B!important} kamu jangan rubah ya, karena kode CSS tersebut berfungsi untuk mengubah tampilan body menjadi warna hitam.
Nah dari kode CSS yang panjang diatas kamu harus sesuaikan atau ubah dengan kode CSS atau class properti pada blog mu, salah satu contohnya seperti dibawah ini.
Perhatikan inspect element diatas kode class property CSS nya adalah .post nah kita tinggal sesuaikan kode CSS dark modenya yaitu seperti .modepanduancode .post{background:#213040!important}
Kode yang .modepanduancode adalah kode class property dari dark mode-nya, lalu kode .post adalah kode yang harus kamu sesuaikan dengan blog kamu masing-masing, dan untuk kode {background:#213040!important} adalah kode untuk merubah tampilan blog class .post menjadi berwarna hitam.
Begitu juga untuk kode class property CSS yang lain-nya, kamu harus sesuaikan dengan kode class property CSS pada blog mu yang ingin di pasang dark mode.
Jika kamu bingung cara mencari kode class properti CSS-nya kamu dapat menggunakan inspect element pada blog mu.
Tapi kamu dapat mencoba dulu semua kode CSS yang Panduan Blogger pakai pada blog www.panduancode.com barang kali kode class property-nya CSS banyak yang sama, nah untuk beberapa class property CSS yang berbeda baru kamu ubah dengan kode yang ada pada blog mu.
Tombol Dark Mode Di Blog
Untuk tombol dark mode di blog Panduan Blogger menyimpannya dibagian navigasi blog atau biasa disebut bagian navbar.
Jadi kode tombolnya seperti kode dibawah ini.
<li><span><input class='tgl tgl-panduan' id='modepanduancode' type='checkbox'/><label class='tgl-btn' for='modepanduancode'/></span></li>
Kemudian save template blogger kamu masing-masing dan uji coba fitur dark mode di blog mu.
Jika ada beberapa bagian blog mu yang tidak berubah tampilannya menjadi dark mode maka itu kode class property CSS bagian itu berbeda dengan kode class property yang ada di blog www.panduancode.com.Jadi kamu harus ganti kode tersebut dengan cara inspect elemen dulu untuk mendapatkan class CSS-nya kemudian ganti class CSS yang tidak berfungsi tersebut.
Sebenarnya sampai disini tutorial cara membuat dark mode dengan cache di blog terbaru sudah selesai, namun pastinya kamu masih agak sedikit bingungkan kode class CSS yang begitu banyaknya yang harus kamu ganti tersebut.
Oleh sebab itu kamu harus sabar menyesuaikan satu persatu kode class CSS pada blog mu kedalam fitur dark mode-nya.
Memang membuat fitur dark mode yang sangat sempurna akan memakan waktu yang cukup lama, namun hasilnya pasti memuaskan.
Sekian saja yang dapat Panduan Blogger sampaikan pada tutorial kali ini semoga bermanfaat.
Jika kamu mempunyai pertanyaan tentang tutorial ini silahkan hubungi Panduan Blogger melalui widget WhatsAPP yang ada pada blog ini.
Terima kasih, salam Blogger Indonesia.
