Cara Membuat Tombol Mode Gelap / Modus Malam pada Blog versi Kurazone

Pilihan Editor :

Cara Membuat Tombol Mode Gelap / Modus Malam pada Blog versi Kurazone
Penulis Bagus Surochman
17
Modus malam
AAA


KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar mengenai "Cara Membuat Tombol Mode Gelap / Modus Malam (Dark Mode) pada Blog versi Kurazone". Fungsi dari tombol Modus Malam ini adalah mengubah warna template yang awalnya terang menjadi gelap.

Langsung to the point saja...
1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dan Query dibawah ini, letakkan diatas kode </body>
<style>
/* Toggle Night Mode Kurapetang */
.Switchbtn{text-align:center;display:inline-block;align-items:center;margin-top:3px;padding:9px}
.tgl2{display:none;}
.tgl2 + .tgl2-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;}
.tgl2 + .tgl2-btn:after,.tgl2 + .tgl2-btn:before{position:relative;display:block;content:"";width:50%;height:100%;}
.tgl2-switch + .tgl2-btn{background:#D0D0D0;border-radius:100px;transition:all .4s ease;}
.tgl2-switch + .tgl2-btn:after{content:"\f185";font-family:fontawesome;border-radius:100px;background:#979797;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:0;}
.tgl2-switch:checked + .tgl2-btn{background:#205A95;}
.tgl2:checked + .tgl2-btn:after{left:50%;background:#123456;content:"\f186";font-family:fontawesome}
.Kurapetang {background:#0c0a0a !important}
.Kurapetang .post {background:#0c0a0a !important}
.Kurapetang .post-body {color:white !important}
.Kurapetang .post-title{color:white !important}
.Kurapetang .classbaru{}
.Kurapetang .classbaru{}
</style>
<script>//<![CDATA[
$("#Kurapetang").click(function(){
$("body").toggleClass('Kurapetang');
});
//]]></script>

3. Copy kode HTML dibawah ini, letakkan di tempat yang kalian inginkan (peletakan kode bebas sesuai selera)
<div class='Switchbtn' style='float:right;background:#1e1e20'>
<span style='font-size:8px'><i>Modus malam</i></span> <input class='tgl2 tgl2-switch' id='Kurapetang' type='checkbox'/>
<label class='tgl2-btn' for='Kurapetang'/></div>

4. Simpan template

Note :
  1. Ubah float:right menjadi float:left apabila kalian ingin meletakkan tombol nya berada dibagian kiri
  2. Keterangan .Kurapetang .classbaru {} adalah untuk menambah bagian yang ingin dijadikan warna gelap. Silahkan ganti .classbaru {} nya menjadi nama selektor yang kalian ingin ubah warnanya. Contoh, jika ingin membuat HEADER dan SIDEBARNYA menjadi gelap, maka >> .Kurapetang .header{background:black} atau .Kurapetang .sidebar {background:black}. Jangan lupa untuk menambahkan color:white agar teks yang berada pada area gelap menjadi warna putih >> .Kurapetang .sidebar{background:black;color:white}
  3. Sisanya bisa kalian explore sendiri

Pastikan bahwa template kalian sudah terpasang kode Jquery seperti dibawah ini (gunakan ver. 3.3.1 atau versi diatasnya):
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Itulah informasi mengenai "Cara Membuat Tombol Mode Gelap / Modus Malam (Dark Mode) pada Blog versi Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck !!
Cara Membuat Tombol Mode Gelap / Modus Malam pada Blog versi Kurazone

17 komentar:

  1. sangat bermanfaat sekali hu..

    BalasHapus
  2. wah keren gan infonya,kapan² bisa diaplikasikan ke blog saya juga hehehe....

    BalasHapus
  3. Ini yg aku cari.

    ipung.net

    BalasHapus
  4. Bagus banget blog nya jadi unik kalau di pasang modus malam ya. Terimakasih mas sharing sangat manfaat. Coba utak Atik blog buat mengaplikasikan.

    BalasHapus
  5. Mantap tutorialnya. Namun, saya masih bingung saja sama fitur modus malam ini. Karena, saat menggunakan modus malam, mata jadi cepat lelah karena tulisan seakan menyala. Saya lebih senang menggunakan tampilan yang biasa saja. Saya hanya tertarik sama fitur mengubah ukuran font pada blog ini. 😃😃

    BalasHapus
  6. Terima kasih tutornya.. Sudah berhasik saya terapkan di blog sy.. meskipun sempat mengalami kesulitan untuk ngedit classnya.

    BalasHapus
  7. Mau tanya nih mas, apakah membuat tombol modus malam pada Blog akan mempengaruhi kecepatan Blog serta mempengaruhi dalam review adsense?

    BalasHapus
  8. Keren Om. Tapi bikin berat loading nggak nih?

    BalasHapus
  9. Modus malam memabg sangat berguna, jika sedang membaca artikel di tempat gelap jadi cahayanya tidak terlalu menusuk kemata

    BalasHapus
  10. Ternyata gak cuma wordpress aja yang sanggup dibuat seperti ini. Bloggerpun sudah bisa diaplikasikan, dengan ini nggak perlu pindah ke wp untuk merasakan fungsi modus malam ini

    BalasHapus
  11. saya waktu melihat youtube ada modus malam jadi pengen, ternyata di blogspot juga bisa ya. apakah membuat loading blog?

    BalasHapus
  12. Keren tutorialnya, blog menjadi terlihat lebih propesional dengan adanya modus malam sehingga membuat pembaca betah berlama-lama membaca artikel di blog yang kita miliki

    BalasHapus
  13. perlu dicoba ini hhe

    BalasHapus
  14. Belum berhasil hiks... Apanya yang kurang yak.... Bawa udud dulu dah... Maturtengkyu om artikelnya mantul (mantap betul) 😂

    BalasHapus
  15. mantapp
    req mas cara membuat grid n list mas

    BalasHapus
  16. hahahahaha nama pemanggilnya kupetang, etapi ini bagus juga sih, responsif untuk membuat kode layar modus malam... keren mas bagus, itu kode begitu biasanya nemu atau bikin sendiri ya ? pinter banget mas bagus

    BalasHapus
    Balasan
    1. gak sengaja nemu mas., lalu dikembangin berdasarkan versi sendiri,,..

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.