Cara Mudah Membuat Mode Gelap Atau Mode Malam di Blog

Cara Mudah Membuat Mode Gelap Atau Mode Malam di Blog

Jalak Ikal 25 May 0 komentar
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

loading...
Ratings: 
Posted by Jalak Ikal, Published at 25 May and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi