Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog - Wanjay

Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog

Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog
Gambar Pemanis

Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog - Dark Mode, Night Mode atau Mode Gelap atau Mode Malam atau Modus Malam atau apalah itu, adalah salah satu fitur yang dapat mengubah tampilan template menjadi terlihat gelap seperti contoh nya Youtube versi dark mode, Twitter dan Telegram X.

Fitur dark mode ini di lengkapi dengan tombol switch, jadi kalo mau aktifkan dark mode nya atau kembali ke light mode tinggal pencet tombol.

Dengan menggunakan tampilan gelap alias tidak terang begini, mata pembaca menjadi tidak sakit jika berlama - lama membaca dan juga tidak silau, itu Menurut pengalaman mimin sendiri.

Selain itu, Menjadi terlihat lebih keren saat menggunakan mode ini, tentu nya tampilan warna gelap nya di setting tidak begitu norak ya agar tidak sakit juga mata ngeliat nya.

Oke kali ini mimin mau share tutorial nya, di sini mimin mempraktekkan nya di template yang bernama Viomagz, Mungkin di template lain ada yang sedikit berbeda dalam struktur kode nya dengan viomagz. Untuk itu coba agan kreasikan saja.

Cara Membuat Dark Mode di Template Blogger


  • Buka dashboard blogger > Tema > Edit html
  • Paste kode di bawah ini tepat di atas kode ]]></b:skin> , Kalo mimin biasanya letakkin langsung di bawah judul css nya, contoh nya kode CUSTOM WIDGET di bawah.

Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog

/* Wanjay.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:#cccccc}
.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

  • Tambahkan kode di bawah ini tepat di atas </body>


<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

  • Kemudian, tambahkan lagi kode di bawah ini terserah mau dimana, di sarankan di dekat menu navigasi contoh nya di gambar bawah.

Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog

<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>

  • Simpan / Save

Jika ingin mengubah warna suatu widget atau menu lain nya, Sesuaikan kode css color maupun background yang ada di atas (kode css paling atas/yang di letakin di atas /b:skin) dengan div id yang ada pada template agan, seperti contoh nya jika saya mau mengubah warna background pada widget sosial media ini, tinggal tambahkan atau edit begini.

.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}
.Night #HTML3 {background:#1d2129;}

HTML3 adalah div id nya, #1d2129 adalah kode warna.

Cukup Mudah kan?

Ini DEMO nya

Lewatin shortlink dlu ya gan, h3h3.

Buat yang tidak tertarik dengan warna dark mode nya silahkan di ubah - ubah, dan Silahkan ke Tools Color Picker Ini jika ingin liat - liat warna yang bagus.

Akhir Kata

Demikianlah artikel kali ini tentang Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog, Semoga bermanfaat. Jika ada yang kurang mohon di kritik dan saran, atau ada yang kurang jelas silahkan di tanyakan di komentar. Nantikan artikel terbaru lainnya di Wanjay. Terima kasih sudah berkunjung.

Subscribe Blog Wanjay Agar tidak Ketinggalan Update. Gratis!!!

Buka Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel