Cara Membuat Tampilan Mode Malam atau Dark Mode diBlog

Gambar Malam

Hai sobat?!? Kali ini saya akan share tentang Cara Membuat Tampilan Dark Mode diBlog. Bagi kamu yang blognya gitu gitu aja dan sangat membosankan mungkin artikel yang saya buat berikut ini akan akan dapat membantu.

Tampilan Dark Mode adalah tampilan yang mengubah blog kamu dari mode terang ke mode dark. Menurut saya fitur ini akan membuat blog mu menjadi lebih keren. Cara mengubah dari mode terang menjadi mode dark pun sangatlah mudah. Kamu cukup pencet tombol switch pada menu. Coba saja diblog saya.

Berikut ini tutorial tentang cara membuat fitur dark mode diblog. Kali ini saya akan praktekan pada template viomagz.

Cara Membuat Tampilan Dark Mode di Blog

• Buka dashboard blogger kamu,
• Untuk berjaga jaga jika template eror silahkan backup template. Caranya? Klik Tema > Klik Backup dan Pulihkan,
• Klik Tema > Edit HTML,
• Paste kode dibawah ini letakan diatas kode ]]></b:skin>, 

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

• Tambahkan kode dibawah ini tepat diatas kode </body>

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

• Tambahkan kode dibawah ini pada kode menu

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

• Simpan atau save.

Coba sekarang kamu lihat blogmu. Selamat mencoba dan semoga bermanfaat.

-Rizki Ramadhan-

Share this post