Cara Membuat Tombol Switch Mode Malam Di Blogger


Cara-membuat-tombol-switch-mode-malam

Dark Mode, Night Mode atau Mode Malam, merupakan fitur yang dapat membuat suatu website atau blog berubah menjadi tampilan gelap.

Biasa nya Mode Malam ini sering kita jumpai di website atau aplikasi platform media sosial seperti Facebook, Youtube, dan Twitter.

Namun seiring berkembang nya zaman, Mode Malam kini bisa di gunakan di website atau blog pribadi. 

Di artikel kali ini, saya akan memberikan sedikit tutorial singkat Cara Membuat Tombol Switch Mode Malam Di Blogger

Jika kalian tertarik untuk memasang fitur Mode Malam ini dalam website atau blog pribadi masing - masing. Kalian bisa simak dalam tutorial berikut ini.

Cara Membuat Mode Malam di Blogger

1. Log in ke Blogger > Pilih Tema > Edit HTML.
Masuk-akun-blogger

2. Masukan kode CSS di bawah ini sebelum kode ]]></b:skin> atau </style>
Style-css-mode-malam

 Baca Juga: Cara Membuat Syntax Highlighter di Blogger

/* 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}
3. Copy dan Pastekan kode JavaScript di bawah ini sebelum kode </body>

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>
4. Terakhir, masukan kode pemanggil html berikut. Untuk pemasangan nya bisa sesuaikan dengan kebutuhan kalian. Contoh, disini saya akan menempatkan nya di bagian header blog.
<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>
5. klik Simpan Tema.

Berikut adalah tampilan Mode Malam yang telah di pasang di blogger

Tampilan-mode-malam

Nah, berikut adalah tutorial Cara Membuat Tombol Switch Mode Malam Di Blogger, yang telah saya bagikan untuk kalian semua.


Jika ada pertanyaan perihal tutorial ini, jangan ragu untuk berkomentar di bawah ini ya. Semoga bermanfaat.

0 Response to "Cara Membuat Tombol Switch Mode Malam Di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel