Cara Mudah Membuat Mode Gelap Atau Mode Malam di Blog

adscblog

Mode Malam atau mode Gelap merupakan Salah Satu Feature Yang sering di Gunakan Oleh kebanyakan blogger

Bahkan Mode Malam Atau Mode Gelap Ini sering di pasang di Jejaring Social seperti facebook,WhatsApp ataujuga Twitter

Bahkan masih banyak lagi Media Social yang menggunakan Feature Mode Gelap Atau mode Malam tersebut

Tujuan Utama Penggunaan Mode Gelap Atau Mode Malam tersebut Untuk Menjaga Mata Dari Sinar Ponsel Atau Sinar Laptop yang Berlebihan masuk ke Mata kita

Baca Juga : Cara Membuat Mode Malam Atau Mode Night di blog

Sehingga Dengan Adanya Mode Gelap Atau Mode Tersebut Mata si pembaca Akan terjaga atau dengan kata lain dengan Mebuat Nya Mode Gelap Atau Mode Malam tersebut Agar Mata kita tidak Silau Karena SInar Ponsel atau Juga Sinar Komputer

Sehingga Tidak Heran Jika Para Pemilik Media Social atau Pemilik wbsite atau Blog Tersebut Menerapkan Mode Gelap atau Mode Malam Agar si pembaca Betah Berada di Website Tersebut

Nah Untuk Itu Jika Anda Tertarik dengan Mode Malam Atau Mode Gelap tersebut dan ingin Menerapkan ny di Blog Sobat,sobat bisa mengikuti Langkah-langkah Penerapan Mode Gelap tersebut di antaranya sebagai berikut :

• Silahkan Masuk Ke bagian Dasbor Blogger anda
• Lalu Kemudian Silahkan Anda Pilih Salah Satu Blog Milik Anda
• Kemudian Klik Tema
• Lalu Kemudian Lagi Klik Edit HTML
• Setelah berada di bagian Edit HTML Silahkan Anda Pasang CSS Berikut

/* Mode Gelap gblog.id */
.switch {padding-right:9px;margin-top:12px;position:relative;display:inline-block;width:30px;height:20px}
.switch input {width:30px;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(10px);-ms-transform: translateX(10px);transform: translateX(20px)}
.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}

• Lalu Kemudian Silahkan Anda Cari lagi Kode </body> Biasa nya berada di bagian Akhir Template,Lalu Letakan Kode Berikut Sebelum Kode </body> Tersebut

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

• Lalu Kemudian Silahkan Anda Letakan Kode Berikut di Daerah sesuai dengan ke inginan anda

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

• Kemudian Save Template dan Lihat Hasil nya

Nah itulah cara membuat Tombol Mode Gelap atau Mode Malam di Blog
Semoga Artikel Ini Bisa Membantu Sobat blogger semua,Selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 25 Mei and have 0 komentar