DESAIN BLOGGER | MENAMBAH DARK MODE ( MODE MALAM ) DI BLOG DENGAN MUDAH TANPA ERROR

DESAIN BLOGGER | MENAMBAH DARK MODE ( MODE MALAM ) DI BLOG DENGAN MUDAH TANPA ERROR

DESAIN BLOGGER | MENAMBAH DARK MODE ( MODE MALAM ) DI BLOG DENGAN MUDAH TANPA ERROR
DESAIN BLOGGER | MENAMBAH DARK MODE ( MODE MALAM ) DI BLOG DENGAN MUDAH TANPA ERROR


Selamat datang , kali ini saya akan membagikan cara membuat mode malam pada sebuah blog, fungsi dari mode ini adalah membuat tampilan website menjadi sedikit tidak terang, karena background yang memiliki warna cerah di ganti menjadi gelap dan tulisan artikel menjadi terang. Hal ini pasti akan membuat pengunjung saat malam hari tidak terlalu silau dengan warna background dasar.

Membuat tampilan dark mode pada website merupakan salah satu fitur yang dapat membuat tamplan menjadi terlihat gelap seperti website twitter, youtube, dan sebagainya

Kelebihan fitur ini dapat membuat nyaman para pengunjung website anda. Karena menerapkan tampilan dark tetapi tetap membuat nyaman pengunjungnya saat berkunjung di website anda pada saat malam hari dan membuat mata pengunjung blog anda tidak sakit karena cahaya yang terlalu terang.

Fitur ini memiliki tombol switch, jadi misalkan pengunjung blog tidak menyukai tampilan gelap dapat kembali ketampilan default, atau sebaliknya.

Baiklah tidak perlu berlama-lama lagi berikut tutorial membuat tampilan night mode di Website blog

1. Buka blogger > Template > Edit HTML

2. Copy dan Paste kode CSS berikut di dalam tag
]]></b:skin>

Berikut scriptnya

.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}

3. Copy kode di bawah ini dan letakkan di atas

</body>

Berikut kodenya

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

4. Dan terakhir copy kode berikut terserha anda ingin diletakkan dimaan, kode dibawah digunakan untuk pengunjung mengganti tampilannya ke mode night

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

5. Done

Catatan
Jika ingin mengubah warna widget lainnya anda hanya perlu menambahkan nama widgetnya, dan jika ingin mengatur warna widget blog lainnya anda hanya perlu mengatur kode warna CSSnya saja

Contohnya


.Night #wrapper {background:#1d2129;}

Keterangan
Warna merah bisa diganti dengan ID atau Class dari widget yang ingin diubah warna backgroundnya

Sekian tutorial membuat mode night pada blog website anda.
Cara ini terbilang mudah dan tidak memberatkan speed dari blog, karena cara yang saya gunakan untuk membuat tampilan malam pada blog tidak menggunakan cookies.

Jadi saat pengunjung membuka halaman lain ataupun mereload blog tampilan akan kembali seperti semula.
Terima kasih telah berkunjung

Belum ada Komentar untuk "DESAIN BLOGGER | MENAMBAH DARK MODE ( MODE MALAM ) DI BLOG DENGAN MUDAH TANPA ERROR"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel