Cara membuat dark mode di blogger

Cara membuat dark mode di blogger


Pada kesempatan kali ini saya mau memberikan tutorial seputar blogger. Tutorial kali ini yaitu membuat fitur dark mode.


Dark mode yaitu fitur yang berfungsi untuk merubah tampilan menjadi gelap sehingga membuat pembaca menjadi nyaman serta melindungi mata ketika di malam hari karena cahaya yang di hasilkan tidak merusak mata.


Fitur dark mode yang akan saya berikan mempunyai tombol yang bisa di switch ON-OFF.


Perlu di perhatikan bahwa dark mode yang saya berikan ini hanya untuk pengguna blogger saja, Tidak untuk wordpress. 


Berikut adalah beberapa cara menerapkan fitur dark mode pada blog kita.


  • Buka Dasboard Blogger
Pilih tema>> Edit With HTML
Masukan kode berikut, diatas  ]]></b:skin> atau </style>

/* adseo.top 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}

  • Cari </body> dan letakan kode di bawah ini tepat di atas kode tersebut.
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

  • Letakan kode di bawah ini sesuai keinginan anda, Rekomended letakan di bagian navigasi ataupun bagian header blog anda.
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label></li>
Sekian tutorial singkat membuat dark mode untuk blogger.

Berlangganan update artikel terbaru via email:

0 Response to "Cara membuat dark mode di blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel