Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot

Blog Cara Ocha - Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot - Hello gaes selamat pagi & selamat membaca kembali di blog²an Cara Ocha setelah hari lalu membahas mengenai Cara Memasang Notifications Cookies di Blogspot!

Pada kesempatan kali ini pun akan sedikit aku ulas masih mengenai blog, yaitu Cara Manual dan Otomatis Membuat Tombol Dark Mode di Blog Blogspot! Yuk langsung aja di simak cara nya di bawah ini..

Cara Otomatis Membuat Tombol Dark Mode di Blog Blogspot

Sebelum melanjutkan ke cara manualnya, untuk kalian yang tidak mau ribet harus mengedit isi tema pada blog, aku sarankan menggunakan saja template / theme / tema LinkMagz buatan Mas Sugeng pada tema tersebut sudah secara otomatis terdapat Dark ModeNya sebagai contoh kalian bisa lihat pada blog ini atau secara live klik LinkMagz disini!

Di Blog Cara Ocha saat ini menggunakan tema buatan Mas Sugeng dengan nama tema nya LinkMagz akan tetapi ada beberapa element yang sudah di ubah sesuai selera hehe! Sebenarnya tanpa di rombak ( Re-design ) juga, tampilannya sudah kece & luar biasa banget gaes! Tampilan tema blogspot ini rasa blog WordPress 😅

Tapi yang lebih menakjubkannya bukan hanya hal itu saja, tapi Kecepatan loadingnya super wuzz banget gaes! Dan masih banyak lagi kelebihan-kelebihan yang super keren dari tema ini, selengkapnya kalian baca saja pada halaman ini - LinkMagz, Template Blogspot Rasa WordPress [Loading Super Wuzz] untuk harganya di jamin gk bakalan menguras dompet! Hehe

Di samping itu cara setting tampilan tema juga dengan mudah 100% di dalam tata letak, jadi buat kalian yang baru terjun membuka blog di blogger blogspot ini, pastinya tidak akan kesulitan lagi harus membuka isi tampilan template yang terkesan membingungkan mengoprek serangkaian kode-kode 😅..

Cara Manual Membuat Tombol Dark Mode di Blog Blogspot

Oke lanjut gaes! Untuk cara otomatisnya sangat mudah banget bukan ?.. tinggal beli saja template LinkMagz buatan Mas Sugeng setelah itu tinggal kalian terapkan pada blogspot kalian dengan cara upload file yang berektensi .xml ( dot xml ), nah sekarang cara membuat secara manualnya! Yuk simak dengan baik, biar tidak ada kesalahan saat penerapannya!

Pertama : Log in ke akun Blogger kamu → pilih Tema→ Edit HTML ( Lihat Gambar di bawah - Klik gambar untuk memperjelas ).

Kedua : Copy dan Pastekan kode CSS di bawah ini sebelum / di atas kode ]]></b:skin> atau </style>

/* 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}

Ketiga : Pastekan JavaScript di bawah ini sebelum / di atas kode </body>

<script>
//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]>
</script>

Ke Empat : Terakhir masukan kode pemanggil di bawah ini.. Untuk penempatannya bisa kamu sesuaikan dengan keinginan kamu.. misalnya di header blog ( Kepala blog ) atau footer blog ( kaki blog ) tapi lebih baiknya sih di tempatkan di bagian kepala blog ( Header blog )

<li>
  <label class='switch' for='Night'>
      <input id='Night' type='checkbox'/>
    <div class='slider round'/>
  </label>
</li>

Gimama gaes, mudah banget kan ? Lebih mudah dan praktis cara otomatis atau manual nih ? 😅 Pastinya cara otomatis lebih praktis dan simpel dong! Hehe! Tapi apa sih gunanya memasang Dark Mode ini ? ( Mungkin sedikit terlintas di kepala kalian ? )

Jadi Dark Mode atau biasa di sebut dengan Mode Malam / mode gelap merupakan fitur yang dimana dapat membuat sebuah website atau aplikasi menjadi tampilan gelap. Biasanya fitur ini sering dijumpai di aplikasi atau website media sosial seperti Youtube, Facebook, dan Twitter! Bahkan WhatsApp pun sudah di update ada Dark Modenya.

Namun seiring berkembangnya zaman, banyak programmer yang ahli coding membuat script yang dapat berfungsi sebagai Dark Mode atau Mode malam ini.

Kini Dark Mode ini bisa dipasang di website atau blog pribadi, salah satu contoh nya di Blogger. Jika kamu memiliki blog pribadi dan ingin mempercantik tampilan lamannya, mungkin dengan menambahkan fitur Dark Mode ini bisa menjadi pertimbangan untuk kamu!..