Cara Membuat Dark Mode Di Blog Terbaru - Panduan Blogger
Panduan Code
Panduan Code Saya menyediakan berbagai tutorial pemrograman, info teknologi, internet marketing, dan lain-lain.

Cara Membuat Dark Mode Di Blog Terbaru

Cara membuat dark mode atau biasa disebut mode malam di blog sebenarnya sangat mudah, oleh sebab itu Panduan Blogger akan membagikan tutorialnya.

Daftar Isi [Tampil]

Cara membuat dark mode atau biasa disebut mode malam di blog sebenarnya sangat mudah, oleh sebab itu Panduan Blogger akan membagikan tutorialnya.

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.

Cara Membuat Dark Mode Di Blog Terbaru

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: &quot;&quot;;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.

Kode CSS Dark Mode

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.

Panduan Code
Panduan Code  Saya menyediakan berbagai tutorial pemrograman, info teknologi, internet marketing, dan lain-lain.
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Hai

Klik Kontak Whatsapp Di Bawah Ini Untuk Mulai Mengobrol

Pemilik Arif NoerWahidin
+62 821-2654-6564
Call us to +62 821-2654-6564 from 0:00hs a 24:00hs
Hai, ada yang bisa saya bantu?
×
Tanya Kami