Cara membuat dan memasang dark mode di blog

Cara membuat dan memasang dark mode di blog - pada kesempatan kali ini kami akan memberikan beberapa panduan mengenai cara membuat dan memasang fitur mode gelap atau biasa dikenal sebagai dark mode, mode malam atau apalah itu, intinya membuat mode gelap di blog.

Cara membuat dan memasang dark mode di blog

Cara memasang dark mode yang di bagikan tanahsurga.com ini di lengkapi dengan tombol switch ON dan OF untuk memudahkan pembaca menggunakan fitur tersebut. Blog kalian juga akan lebih terlihat profesional dengan adanya fitur mode gelap.

Sebelum memasang mode malam pada blog, ada baiknya kalau kalian harus mengetahui manfaat dan pentingnya fitur ini untuk pembaca artikel blog kalian. Berikut ini penjelasan tentang manfaat dan pentingnya membuat mode gelap di blog.

Apa manfaat dan pentingnya memasang dark mode pada blog?


Memasang dark mode ini ternyata sangat penting untuk kenyamanan pengunjung blog. Tentu dengan adanya fitur mode malam pada blog maka bisa melindungi mata pembaca dari paparan cahaya cinta, eh salah makasutnya cahaya layar.

Pengunjung akan lebih nyaman membaca artikel dengan menggunakan mode gelap yang ada di blog kalian. Karena ada banyak efek buruk cahaya layar bagi mata saat malam hari yang perlu kalian ketahui. Untuk itu kalian juga harus memperhatikan kesehatan mata para pembaca agar terhindar dari efek buruk radiasi sinar biru layar ponsel.

Cara membuat dan memasang mode malam / dark mode di blogger


Pastikan kalian mengikuti langkah-langkahnya dengan benar agar tidak terjadi hal-hal yang tidak di inginkan. Caranya sangat mudah kalian hanya perlu memasang beberapa kode saja untuk menambah fitur mode malam pada blog.

Cara memasang kode css dark mode di blog

  • Masuk dulu ke menu "blogger"
  • Kemudian pilih "template" selanjutnya "Edit HTML"
  • Cari kode </style> atau ]]></b:skin>
  • Kemudian paste kode berikut ini tepat di atas kode tersebut
/* 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}

Cara memasang mode malam di blog

  • Langkah selanjutnya cari kode </body>
  • Kemudian letakan kode di bawah ini tepat diatasnya
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

Cara memasang switch dark mode di blogger

  • Jika semua kode diatas sudah di pasang, kini tinggal memasang button / tombolnya
  • Letakan kode berikut ini pada tempat dimana kalian ingin memasang tombolnya
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>
  • Biasanya tombol tersebut diletakan di bagian navigasi atau header blog atau terserah kalian
  • Jika sudah kemudian pilih "simpan"
Nah itu dia cara memasangnya, gimana mudah kan? Untuk kalian yang merasa kerepotan kalian bisa tanyakan ke kami melalui kamentar dibawah.

Cara memasang switch dark mode di blog memang sangat mudah jika kalian sudah memahaminya. Dengan adanya mode gelap tentu sangat berguna sekali buat pembaca artikel kalian. Apalagi jika browser yang mereka pakai tidak ada fitur mode malamnya.

Untuk itu kalian perlu memsangnya dan jangan lupa berikan tanggapan kalian mengenai artikel cara memasang mode gelap di blogger. Cukup sekian dan semoga bermanfaat.

Posting Komentar