![]() |
Gambar Pemanis |
Cara Membuat Tampilan Dark Mode (Gelap) Pada Template di Blog – Dark Mode, Night Mode atau Mode Gelap atau Mode Malam atau Modus Malam atau apalah itu, merupakan salah satu fitur yang dapat mengubah tampilan template menjadi terlihat gelap seperti contoh nya Youtube versi dark mode, Twitter dan Telegram X.
Cara Membuat Dark Mode di Template Blogger
- Buka dashboard blogger > Tema > Edit html
- Paste kode di bawah ini tepat di atas kode ]]></b:skin> , Kalo mimin biasanya letakkin langsung di bawah judul css nya, contoh nya kode CUSTOM WIDGET di bawah.
/* .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 */ .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}
- Tambahkan kode di bawah ini tepat di atas </body>
<script>//<![CDATA[ $("#Night").click(function(){ $("body").toggleClass('Night'); }); //]]></script>
- Kemudian, tambahkan lagi kode di bawah ini terserah ingin dimana, di sarankan di dekat menu navigasi contoh nya di gambar bawah.
<li><br/><label class='switch' for='Night'> <input id='Night' type='checkbox'/> <div class='slider round'/> </label></li>
- Simpan / Save
Jika ingin mengubah warna suatu widget atau menu lain nya, Sesuaikan kode css color inginpun background yang ada di atas (kode css paling atas/yang di letakin di atas /b:skin) dengan div id yang ada pada template agan, seperti contoh nya apabila admin ingin mengubah warna background pada widget sosial media ini, tinggal tambahkan atau edit bebeginilah.
.Night .post-title {color:#cccccc} .Night ul.nav-social {color:#1d2129} .Night .post-snippet {color:#cccccc}
.Night #HTML3 {background:#1d2129;}
Keunggulan tanpa menggunakan cookies pada dark mode ini, template blog menjadi lebih ringan sebab tak di pasang nya fitur cookies tersebut, berbeda dengan ketika menggunakan fitur cookies seperti youtube maka akan menjadi lebih berat.
Akhir Kata
Sumber Web Wanajay