Cara Membuat Mode Gelap di template Blog

Hallo Sobat sidobey kali ini saya akan berbagi trik tentang bagaimana cara membuat Mode Night atau Mode Malam atau Juga Mode Gelap di Template Blogger,Mungkin bagi sebagian pengunjung Blog atau yang suka Googling Mode Malam ini sering di temui di blog blog yang anda kunjungi

Karena saat ini Mode Night/malam ini sering di gunakan Para Blogger untuk mempercantik Blog tersebut,sebenar nya sih Mode Night ini tidak ada Pengaruh alias tidak ada Guna nya bagi para pengujung blog hanya untuk pemanis Blog atau Template Saja

Namun Walaupun demikian tidak sedikit para Blogger yang menggunakan Mode Night tersebut,template atau blog kita akan kelihatan Gelap ketika Kita mengklik link atau tombol yang sudah di tentukan oleh Pemilik Blog tersebut

Tidak sedikit Pemilik Blog yang menerapkan Mode Night tersebut bahkan pernah di Twitter Juga mode Malam ini di terapkan nya,di twitter di bagian Profil pernah di terapkan tombol mode Malam ini,untuk mengaktipkan Mode Malam Cukup dengan Mengklik Tombol nya maka akan menjadi Gelap,dan sebalik nya juga untuk mengaktipkan Mode Terang nya kembali

Nah untuk SObat Blogger yang Juga ingin memasang Mode Malam ini,anda pun bisa menggunakan Mode Night di template atau di blog sobat,dengan mengikuti langkah langkah Pembuatan nya di bawah ini

Membuat Mode Night/Malam di blog dengan Menggunakan Tombol

• Masuk ke akun blogger sobat
• Pilih Blog yang akan di terapkan Mode Night ini
• kemudian klik Tema > Edit html
• Setelah berada di edit HTML silahkan anda letakan kode CSS di bawah ini

/* gblog.com 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 sidobey.com */
.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_sido_bey .recent-post-sido-bey span.sidobey_title a{color:#cccccc}
.Night span.sidobey_title a .Recent_Post_sido_bey .recent-post-sido-bey {color:#cccccc;background:#1d2129}
.Night .Recent_Post_sido_bey .recent-post-sido-bey .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#1e90ff}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

• Langkah selanjut nya silahkan anda cari kode </body> dan letakan kode berikut sebelum kode </body> tersebut

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

• Langkah selanjut nya letakan kode HTML berikut sesuai dengan keinginan anda ingin menempatkan nya dimana

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

Membuat Mode Malam/Night cara Classik di Blog

Untuk membuat Mode Night/Malam di Blog dengan cara Klasik alias tidak menggunakan Tombol cukup dengan Link Saja,cara pembuatan nya adalah sebagai berikut

• Masuk ke akun Blogger seperti biasa
• Setelah berada di bagian edit Html letakan CSS berikut

/* CSS Night Mode ketika tombol di Klik */
.nightmode {
    background:black;
    color:#fff;
}
/* CSS Tambahan untuk Elemen lain */
.nightmode div {
}

•  Setelah itu silahkan anda letakan kode berikut sebelum kode </body>

 <script>
//<![CDATA[ 
$(document).ready(function(){
    $("button.tombol-nightmode").click(function(){
        $("body").toggleClass('nightmode');
    });
});
//]]>
</script>

• Kemudian Letakan kode HTML berikut sesuai dengan ke inginan anda

<button class="tombol-nightmode">Night Mode</button>

• Kemudian Save dan lihat hasil nya

Nah itulah Cara Membuat Mode Night / Malam Di Blogger dengan 2 model yaitu menggunakan Tombol dan juga dengan model klasik,semoga artikel nya bisa membantu sobat blogger semua,selamat mencoba

• SHARES
• Share
• Tweet
• Share
• Share

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by D2Ubed, Published at Oktober 04, 2019 and have 0 komentar