Cara Membuat Tombol Switch Mode Malam Di Blogger

Header Menu


Cara Membuat Tombol Switch Mode Malam Di Blogger

Adan Alviansyah
Sunday, September 15, 2019
Penting untuk Menjadi Perhatian. Sebelum Anda Melanjutkan untuk Membaca Berita, Melihat atau Mengajukan Permohonan Kerja dari Informasi-Informasi Yang Kami Tulis di halaman ini, Harap diperhatikan Tanggal Expired Yang Tertulis di bagian Halaman Postingan atau di Halaman Sumber Kami, Agar Anda Tidak Keliru dalam Membuat Keputusan Untuk Sesuatu Yang Belum Jelas Anda Pahami. Sekali lagi Harap di Baca dengan Seksama Informasi Yang Ada di Halaman ini.

Blog / Website ini Menyajikan Berbagai Informasi Terbaru Baik Nasional Maupun Internasional Seperti: Berita Terkini, Politik, Daerah, Nasional, Viral, Kejadian Aneh dan Nyata, Lowongan Kerja Terbaru, Tips and Trick dan lain-lain. Kami Mencari Informasi dari Berbagai Sumber Terpercaya, Kemudian Kami Tulis Kembali di Blog / Website ini untuk Memperluas Jangkauan Informasi. Informasi Yang Kami Sajikan Sifatnya Hanya Sebatas Membantu Pencari Informasi dalam Menemukan Berbagai Informasi Penting Yang Ada di dunia Untuk Kebutuhan Mereka Yang Sifatnya Positif dan Mudah-Mudahan Bermanfaat. Jika Anda Ingin Terhubung Bersama Kami Silahkan Kunjungi Halaman Medsos Group Kami untuk Mengajukan Pertanyaan, Masukan, Gabung Group Loker Via Telegram Silahkan Klik Gabung Sekarang...


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.