×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara membuat fitur dark mode pada blog

Sahabat FARONESIA dimanapun kalian berada, dark mode atau mode malam adalah salah satu fitur yang tersusun dari beberapa kode yang difungsikan dapat mengubah tampilan menjadi gelap seperti contoh blog saya ini, kalian bisa mengaktifkan dark mode dengan menekan button di menubar.

Pada fitur dark mode ini dilengkapi tombol switch on dan off. Keunggukan dari mode gelap ini adalah mata para pembaca menjadi tidak sakit saat membaca artike blog yang dipasangi fitur ini dan juga tidak menyilaukan mata. Selain itu, penampilan blog menjadi lebih keren saat menggunakan mode ini.

Sebenarnya fitur ini sudah lama sekali dikenal didunia blogger, namun banyak versi dari fitur dark mode tersebut, nah disini admin AZZAINFO akan membagikan fitur dark mode yang simpel namun keren dan juga ditambah cara-cara penerapan yang sudah tertata rapi agar kamu semua mudah memahaminya.

Pada kesempatan ini admin sebelumnya telah mencobanya dan mengkreasikan penerapannya pada template viom*gz (template yang sekarang admin pakai). Agar tidak memakan waktu lama, langsung saja kita mulai tutorialnya:
  • Buka blogger
  • Dashboard > tema > edit html
  • Paste kode dibawah ini tepat diatas kode ]]></b:skin>
/* faronesia.com Night Mode */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#1e90ff}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}
  • Tambahkan kode dibawah ini tepat diatas kode </body>
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>
  • Kemudian tambahkan kode dibawah ini sesuai keinginan kalian, kalau admin menambahkan kode di susunan kode menu navigasi
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label></li>
  • Selesai dan save.
Untuk DEMOnya kalian bisa lihat diblog yang kalian baca sekarang ini.

Mudah bukan? Fitur dark mode ini tidak menggunakan cookies jadi setiap kalian memuat halaman baru akan kembali terang dan kamu harus menekan tombol untuk mengaktifkan fitur ini kembali.
Demikianlah artikel cara membuat fitur dark mode pada blog semoga bermanfaat. Jika masih kurang faham atau ingin memberikan saran dan kritikan silahkan komentar dibawah ini ya.
Buka komentar
Tutup komentar
  1. Boleh nih dicoba mode darknya di blog saya...thanks gan

    ReplyDelete
  2. Oke makasih buat infonya mas broo

    ReplyDelete
  3. kayanya asik tuh klo dicoba :)
    jangan lupa berkunjung ke blog saya banyakmembaca.com

    ReplyDelete
    Replies
    1. Selamat mencoba gan,,,ok ntar ane bw

      Delete
  4. Kaya nya cocok ini buat blog saya trimaksaih min👍

    ReplyDelete
  5. Ane Coba ahh, dpt script baru, thanks gan(y)

    ReplyDelete
  6. Baru tahu klo ada fitur begini...... kiraim cm twitter aj. Bgus artikelnya...

    ReplyDelete
  7. Fitur dark modenya keren banget, ty kak atas info nya mantaps

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete

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.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial