Cara Membuat Mode Gelap, Malam, Night Pada Website Blog

Membuat tampilan dark mode pada website merupakan salah satu fitur yang dapat membuat tampilan menjadi terlihat gelap seperti website twitter, youtube, dan facebook pun memakainya.

Fitur malam pada website ini bisa anda terapkan karena memberikan nuansa yang berbeda, tampilan gelap memang dianjurkan ada pada sebuah website, karena beberapa orang lebih nayaman membaca dengan tampilan redup.

Fitur ini memiliki tombol switch, jadi misalkan pengunjung blog tidak menyukai tampilan gelap dapat kembali ketampilan default, atau sebaliknya.

Memasang script dark mode blogger.

Pasang mode gelap pada website blogger memang dianjurkan, karena menurut pribadi saya sendiri, fitur ini membuat nyaman saat membaca artikel blog, lagi pula kelebihan penerangan (seperti warna kuning yang menusuk mata atau warna terang lainnya) tidak menyenangkan saat kita membacanya, ditambah jika sekitarnya seperti sidebar juga memberikan warna dominasi lainnya seperti putih.

Baca : Memasang notifikasi cookies blog responsif.

Baiklah tidak perlu berlama-lama lagi berikut ini tutorial membuat tampilan mode malam di Website blog.

1. Buka Blogger> Template > Edit HTML.
2. Copy dan Paste kode CSS berikut tepat diatas tag ]]></b:skin>.

               .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 kode di bawah ini dan letakkan di atas tag </body>.

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



4. Dan terakhir copy kode HTML dibawah terserah anda ingin diletakkan dimana, kode dibawah digunakan untuk pengunjung mengganti tampilannya ke mode night.

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



5. Done.

Baca : Membuat widget artikel terbaru blogger minimalis.

Catatan

Jika ingin mengubah warna widget lainnya anda hanya perlu menambahkan nama widgetnya, dan jika ingin mengatur warna widget blog lainnya anda hanya perlu mengatur kode warna CSSnya saja.

Contohnya.

         .Night #wrapper {background:#1d2129;}
      

Keterangan

1. Warna merah bisa diganti dengan ID atau Class dari widget yang ingin diubah warna backgroundnya.

Baca : Membuat custom 404 blogger menarik.

Sekian tutorial membuat mode night pada blog website anda.

Cara ini terbilang mudah dan tidak memberatkan speed dari blog, karena cara yang saya gunakan untuk membuat tampilan malam pada blog tidak menggunakan cookies.Jadi saat pengunjung membuka halaman lain ataupun mereload blog tampilan akan kembali seperti semula.

Sekian dari saya, Terima kasih telah berkunjung.

Demo