Cara Menambah Mode Gelap Dengan Tombol di Template Blogger

Cara Menambah Mode Gelap Dengan Tombol di Template Blogger Terbaru

Dark Mode yaitu merupakan sebutan dari mode gelap. Disamping web yang mengandung banyak konten, pastinya kurang lengkap jika tampilan masih polos ya sobat, misal saja fitur penambahan pada blog dengan tampilan mode gelap yang membuat orang akan berlama-lama terus kepoin website kita. Misal contoh fitur dark mode pada blog dalam hal desain yang memiliki daya tarik para visitor dengan adanya tombol mode malam.

Adapun fungsi dari fitur dark mode ini yaitu untuk merubah tema blog menjadi gelap sehingga pencahayaannya / background menjadi gelap dengan hanya satu klik tombol saja.

Langsung saja sobat bagi kalian yang ingin melakukan hal ini dengan menambahkan fitur mode gelap pada blog sobat dengan menggunakan tombol switch, berikut step by step seperti yang akan saya tulis secara detail.

TUTORIAL PASANG TOMBOL MODE GELAP DI BLOG

1# SIlahkan buka Dashboard lalu edit template blog dengan cara :

 Klik Tema > Edit HTML

2# Copy script CSS berikut dan paste di bawah ]]></b:skin> atau diatas </Style>

/* Button Dark Mode */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:39px;top:0;z-index:999}.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}.modedark svg path{fill:#fff}.modedark .check:checked~.NavMenu{opacity:1;visibility:visible;top:45px;min-width:200px;transition:all .3s ease;z-index:2}.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}.iconmode:hover{border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%}.check{display:none}.modedark .iconmode .openmode{display:block}.modedark .iconmode .closemode{display:none}.modedark .check:checked~.iconmode .openmode{display:none}.modedark .check:checked~.iconmode .closemode{display:block}
#nav-wrapper > ul > li:not(.colormode) > a > span:not(.new){-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;}#nav-wrapper > ul > li.colormode > a > span{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1 1;flex:1 1;}
/* Dark Mode */
.Night #HTML4{background:#213040}.Night .deskripsi-partner{color:#000}.Night .writer>span{color:#000}.Night .latest-post-title h2{background:#213040}.Night #jagoanSubscribe .email__{background:#213040}.Night #jagoanSubscribe .medsos__{background:#213040}.Night #jagoanSubscribe .email{background:#213040}.Night #wrapper{background:#15202b}.Night #HTML3{background:0 0}.Night #footer-widget-container{background:#1d2129}.Night .share-this-pleaseeeee{background:#213040;color:#fff}.Night .related-post h4{background:#213040;color:#fff}.Night #label-info-th{background:#1d2129}.Night body{background:#1d2129}.Night .post-body{color:#fff;background:0 0}.Night .post-body table.tr-caption-container td{color:#fff}.Night .post-body table td{background:no-repeat;border:1px solid #1a73e8;padding:10px;text-align:left;vertical-align:top}.Night #baca-juga h2{color:#ccc;background:#1d2129}.Night .label-info-th a{color:#fff;background:#1a73e8}.Night li.recent-posts a{color:#ccc}.Night .recent-posts-title h2{color:#ccc}.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#ccc}.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan{color:#ccc;background:#1d2129}.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content{color:#ccc;background:#1d2129}.Night .post-info{color:#ccc}.Night{background:#15202b}.Night h2.post-title a{color:#fff}.Night h2.post-title a:hover{color:#1a73e8}.Night .post-title{color:#fff}.Night ul.nav-social{color:#1d2129}.Night .post-snippet{color:#ccc}.Night #jagoanNewsletter{background:#213040}.Night #Label1{background:#213040}.Night .PopularPosts h3{background:#343944}.Night .latest-post-title h3{border-bottom-color:#313640}.Night .newspaptext{color:#9e9e9e}.Night .PopularPosts h3 span{color:#9e9e9e}.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,#313640 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}.Night #jagoanNewsletter .medsos__{border-top-color:#313640}.Night #footer-container{background:#000}.Night #footer-navmenu{background:#171b25}.Night .sidebar h3{color:#b7b7b7;border-bottom-color:#313640}.Night .sidebar-sticky h3{color:#fff;border-bottom-color:#313640}.Night .latest-post-title h3{color:#fff;border-bottom-color:#313640}.Night .above-post-widget h3{color:#b7b7b7;border-bottom-color:#313640}.Night .comments h3{color:#fff;border-bottom-color:#313640}.Night .btnsocialshare{background:#383c44}.Night .label-line::before{background:#1a73e8}.Night a.showcontent{background:#1a73e8}.Night #jagoanNewsletter input{background:#272b33;border-color:#2b303a}.Night .comments .comments-content .comment-content{color:#fff}.Night div#Label1 h2{border-bottom:1px solid #213040;background:#213040}.Night .related-post-style-3 .related-post-item-title{color:#fff}.Night #baca-juga ul{border:2px solid #333740}.Night #baca-juga h2{border:2px solid #213040}.Night .comments .comments-content .comment-thread ol{background:0 0}.Night .comments .comments-content .inline-thread{background:0 0}.Night .post{background:#213040;border-bottom-color:#252a33}.Night .PopularPosts h2{background:#213040}.Night .comments .comment-block{background:#213040}.Night #comments .comment-thread ol>li{background:#213040;border:1px solid #213040}.Night .comment a{color:#fff}

3# Selanjutnya copy kode HTML berikut dan paste di atas </body>

<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<svg class='openmode' viewBox='0 0 24 24'><path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M14.3,16L13.6,14H10.4L9.7,16H7.8L11,7H13L16.2,16H14.3M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69M10.85,12.65H13.15L12,9L10.85,12.65Z'/></svg>
</label>
</div>

4# Silahkan Simpan Tema blog yang habis diedit.

5# Langkah Terakhir Klik >  Tata Letak > Tambah Gadget > Pilih HTML/Javascript.

Setelah itu salin kode HTML dibawah ini. Dan silahkan paste di kolom HTML/Javascript

<script type='text/javascript'>
//<![CDATA[
/* Dark Mode */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]></script>

Demikian tutorial Cara Menambah Mode Gelap Dengan Tombol di Blogger semoga bermanfaat. selamat mencoba. Terimakasih.