, CARA MEMBUAT BLOG ADA TAMPILAN DRAK MODE - Jejak Krismon

CARA MEMBUAT BLOG ADA TAMPILAN DRAK MODE

Jejakkrismon.com- Hallo teman teman sobat bloger dimana pun berada kembali lagi dengan si Jejak Krismon kali ini saya akan membahas mengenai cara membuat tampilan blog ada mode drak mode nya.

Tidak hanya Instagram, WhatsApp dan facebook saja kini Blog juga bisa ada medo malam nya atau Drak Mode, cara membuatnya cukup simple dan mudah sekali teman teman.

Bila blog teman-teman ada mode malam nya akan tambah keren bukan, karena sekarang semua aplikasi ada tampilan mode malam nya yang sangat membantu sekali saat kita sedang browsing atau main hp saat malam hari.

Pengguna internet dimalam hari sangatlah banyak, Langsung saja gak usah berlama lama bagaimana cara membuat tampilan blog ada drak mode nya.

Cara Membuat Blog Ada Tampilan Drak Mode
Silahkan teman-teman login ke blogger kalian dan kemudian kalian ke Tema lalu Edit HTML. Sebelum kalian edit alangkah baiknya kalian backup atau download dulu tema kalian jika nanti ada kesalahan bisa langsung upload tema kamu yang sudah di download.

salin code css dibawah ini


<style>
/* DARK MODE [jejakkrismon.com]*/
.switch {position:relative;display:inline-block;width:60px;height:20px}
.switch input {display:none;}
.slider {position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;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:#000}
input:focus + .slider {box-shadow: 0 0 1px #2196F3}
input:checked + .slider:before {-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px)}
.slider.round {border-radius:20px}
.slider.round:before {border-radius:50%}
.Night
{background-color:#000!important}
.Night #wrapper,
.Night #post-wrapper article
{background-color:#1d2129!important}
.Night #header .title,
.Night #header .title a,
.Night #header .description,
.Night #post-wrapper article
 {color:#E0E0E0!important}
</style>
taruh code tersebut tempat dibawah ]]></b:skin>
salin code dibawah ini dan taruh diatas </body>
<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script
jika sudah silahkan kalian simpan dan pratinjau jika berhasil disimpan berarti tidak terjadi kesalahan
Tambahkan code dibawah ini dengan cara buka dashboard Tata Letak lalu atur tombol dark mode akan ditaruh dimana, setelah itu pilih tambah gadget > HTML/Javascript. 
<label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/></label>
Jika semua sudah di lakukan silahkan klik simpan dan liat di blog teman teman langsung ada tampilan drak mode nya

0 Response to "CARA MEMBUAT BLOG ADA TAMPILAN DRAK MODE "

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Loading...

Iklan Bawah Artikel