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

Pilihan Editor :

Cara Membuat Tombol Mode Gelap / Modus Malam pada Blog versi Kurazone
Tags 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 !!

45 komentar :

  1. sangat bermanfaat sekali hu..

    BalasHapus
    Balasan
    1. Terimakasih atas komentarnya..selamat mencoba

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

    BalasHapus
    Balasan
    1. Iya gan..silakan .terimakasih sudah mampir

      Hapus
  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
    Balasan
    1. Iya mbak..sama sama..semoga bermanfaat :)

      Hapus
  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
    Balasan
    1. Kalo kecepatan sih iya mas..mempengaruhi..karena menggunakan js..

      Kalo untuk review sih..kayak nya gak ngaruh sih..karena belum pernah ada kejadian review ditolak akibat tombol modus malam :v review adsense konsennya pada konten blog dan navigasi... Sedangkan tombol modus malam ini sama seperti fitur tambahan kayak back to top maupun tombol search

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

    BalasHapus
    Balasan
    1. Karena JS biasanya termuat paling belakang..jadi ketika blog sudah termuat..nih modus baru muncul..

      Hapus
  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
    Balasan
    1. Penambahan js pada template blog tentunya akan memberikan beban loading pada blog.. Kalo di template blog cuma terdapat js modus malam doank..maka kecepatan loading gak begitu pengaruh

      Hapus
  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
    Balasan
    1. Sabar mas.. Kadang hidup tidak sesuai ekspetasi :)

      Hapus
  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
  17. nanya mas saya sudah ngikutin tutorial di atas dan sudah install jquery ver 3.31 ke atasnya kok di blog ane gak muncul

    BalasHapus
    Balasan
    1. Jika penerapan kodenya sudah sesuai tutor ini maka insyaAlloh kode modus gelap nya akan muncul.. Sisanya tinggal mengatur kode : .Kurapetang .classbaru{}
      Diubah sesuai selektor mana yg ingin dijadikan gelap saat tombolnya aktif..

      Hapus
  18. Mas untuk blog amp bisa tidak mas?
    trims

    BalasHapus
  19. Saya sudah coba cara membuat tombol modus malam, udah ku utak-atik dan hasilnya bangus banget. Gak sia-sia aku kesini, soalnya di blog lain malah bingung terapkannya itu juga gak work. Mantap bro tipsnya...

    Maaf OOT. Btw di sebelah tombol modus malam di blog ini, ada fitur kecil besar font postingan. Itu cara buatnya gimana mas? Apakah udah diposting di blog ini? Ditunggu balasannya, thanks

    BalasHapus
    Balasan
    1. Sudah pernah dibahas mas.. Silakan cari di kolom pencarian dengan kata kunci "resizeable font"

      Hapus
  20. Work bang diterapkan di template viomagz?

    BalasHapus
    Balasan
    1. Apa saya salah taruh code ya?
      www.android21.me

      Hapus
    2. pasang juga JQUERY nya mas ..,

      Hapus
    3. Dipasang dimana mas?

      Hapus
    4. JQuery umumnya diletakkan dibawah < head >

      Hapus
  21. Kalau mau memasang tombol night mode nya seperti anda di letakkan dimana ya pas di dalem html?

    BalasHapus
    Balasan
    1. Peletakan bebas mas.. Kalo template nya agak mirip strukturnya dengan punya saya maka bisa diletakkan dibawah author maupun diatas < article >

      Hapus
  22. Mantap artikel yang kucari selama ini

    BalasHapus
  23. cara naruh di header gimana y

    BalasHapus
    Balasan
    1. Ya tinggal taruh sesuai letak headernya mas. .tergantung bagaimana struktur templatenya.. Bisa di header atau di nav. . silakan disesuaikan. .

      Hapus
  24. cara membuat semuanya dark gimana ya biar tidak cuman postnya saja dan bersifat permanen saat di klik (soalnya di klik darkmode kalok klik artikel jd putih lagi)

    BalasHapus
  25. cara bikin keseluruhan dark mode gimana biar tidak hanya post? lalu agar bersifat pertmanent gimana karena saya aktifkan lalu klik artikel jd putih lg tolong bantuannya suhu

    BalasHapus

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.