Cara Membuat Tombol Switch Dark Mode atau Gelap Terang di Blogger

Dark Mode/Night Mode atau yang biasa dikenal dengan Mode Malam adalah sebuah fitur yang dapat membuat sebuah website atau aplikasi terlihat gelap. Biasanya fitur ini banyak ditemukan di aplikasi media sosial atau website seperti Youtube, Facebook, dan Twitter.

Namun, seiring berjalannya waktu, banyak programmer yang ahli dalam coding membuat skrip yang dapat berfungsi sebagai Dark Mode/Night Mode atau Mode Malam.

Sekarang Dark Mode ini sudah bisa dipasang di website atau blog pribadi, salah satu contohnya di Blogger. Jika Anda memiliki blog pribadi dan ingin mempercantik tampilan halaman, mungkin menambahkan fitur Dark Mode ini bisa menjadi pertimbangan Anda.

Di tutorial kali ini, penulis akan membagikan sedikit tutorial Cara Membuat Tombol Switch Dark Mode atau Gelap Terang di Blogger. Jika Anda tertarik dengan fitur ini, Anda bisa langsung simak tutorial berikut ini.

Cara Membuat Dark Mode di Blogger

1. Log in ke akun Blogger Anda - pilih Tema - Edit HTML.

2. Copy dan Pastekan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

/* Night Mode Mas Agus */ .switch { position: relative; display: inline-block; width: 35px; height: 15px; } .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: 15px; width: 15px; 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(20px); -ms-transform: translateX(20px); transform: translateX(20px); } /* 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_Agus .recent-post-mas-agus span.masagus_title a{color:#cccccc} .Night span.masagus_title a .Recent_Post_Mas_Agus .recent-post-mas-agus {color:#cccccc;background:#1d2129} .Night .Recent_Post_Mas_Agus .recent-post-mas-agus .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 JavaScript di bawah ini sebelum kode </body>

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

4. Terakhir masukan kode pemanggil di bawah ini. Untuk penempatannya bisa Anda sesuaikan dengan keinginan Anda. Contoh, disini penulis akan menempatkan kode pemanggilnya di bagian Menu Navigasi header blog.

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

5. Klik Simpan dan Selesai

Berikut adalah contoh tampilan Tombol Switch Dark Mode atau Gelap Terang yang telah terpasang di Blogger.

Nah, itulah tutorial Cara Membuat Tombol Switch Dark Mode atau Gelap Terang di Blogger yang penulis bagikan untuk Anda. Jika Anda mengalami kendala atau ada yang kurang di mengerti, jangan sungkan untuk berkomentar di bawah ini ya. Semoga bermanfaat.

Share this post