Tombol Night Mode
Hallo sahabat blogger, kali ini saya akan memperlihatkan gosip mengenai cara menciptakan tombol night mode pada halaman blog.
Cara menciptakan tombol mode malam atau night mode ini ternyata sangat gampang gan, anda dapat menciptakan tombol night mode dalam hitungan detik.
Cara Membuat Tombol Night Mode, Dark Mode atau Mode Malam di blog, cara ini yakni cara termudah dan paling simpel yang saya ketahui, untuk lebih jelasnya anda dapat simak klarifikasi mengenai cara menciptakan tombol night mode di bawah ini.
Membuat Tombol Night Mode
Inilah cara menciptakan tombol night mode di blog dengan mudah.
1. Pertama, masuklah ke akun blogger anda terlebih dahulu.
2. Pilih sajian tema.
3. Kemudian klik edit html.
4. Lalu masukan isyarat html di bawah ini sempurna di atas tag ]]></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}
5. Kemudian anda cari tag </body>, semoga lebih cepat anda dapat mencarinya dengan memakai tombol ctrl + f yang ada pada perangkat komputer.
Pastekan isyarat di bawah ini sempurna di atas tag </body>.
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>
6. dan terakhir klik simpan.
Untuk menciptakan tombol on dan of night mode, anda dapat menambahkannya sesuai impian atau selera masing masng.
Kalo saya menambahkan tombol on of night mode di dalam widget tata letak, dengan cara sebagai berikut.
Buka halaman blogger anda terlebih dahulu, pilihlah sajian tata letak, lalu klik tambahkan wiget, sesudah itu pilih bacaan html/j4vascript.
Anda juga dapat menambahkan judul widget sesuai impian sebagai pola Mode Malam dll.
Lalu pastekan isyarat html di bawah ini sempurna di kolom html/j4vascript sesudah judul widget.
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label></li>
Terakhir klik simpan.
Itulah cara menciptakan tombol night mode dengan gampang dan cepat, anda juga dapat melakukannya dalam hitungan detik.
 |
| Before |
 |
| After |
Demo tombol on of dark mode dapat anda cek di bawah header infobio, scroll ke atas sobat.
Mungkin cukup sekian ulasan singkat mengenai Cara Membuat Tombol Night Mode. Jika ada pertanyaan kalian dapat berkomentar di bawah ini.
Sumber http://infobio-blog.blogspot.com