Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Membuat Night Mode [Dark Mode] di Blogger
Cara Membuat Night Mode [Dark Mode] di Blogger

Cara Membuat Night Mode [Dark Mode] di Blogger

By Dewa Plokis
Penambahan fitur night mode biasanya digunakan untuk memanjakan visitor yang ingin melihat tampulilan gelap pada blog yang dikunjungi. Terdapat tombol / switch untuk mengubah tampilan dari mode standard ke mode gelep.

Switch dark mode / night mode ini kemudian diatur melalui perubahan CSS. Kode ini nantinya akan mengikuti perintah dari script yang menajalankan mode ini. Banyak blogger sudah menggunakan pemasangan ini pada blog mereka, saya juga termasuk salah satunya. Bagaimana dengan Anda, apakah berminat menggunakan trik ini? Jika iya, maka silakan tetap mengikuti tutorial ini sampai selesai.

Cara Membuat Night Mode Mode Blogger
Dengan pemasangan ini, maka secara otomatis akan membuat tampilan blog semakin keren. Dan pada tutorial kali ini, saya akan memperlihatkan bagaimana cara untuk membuat lalu memasang Night mode kedalam template blog. Pada script ini juga sudah ditambahkan cookies set agar ketika halaman di load ulang atau halaman dikunjungi ulang, maka tidak akan kembali ke mode semula meskipun sudah mengunjungi halaman yang lain.

Bagaimana dengan tempalte blog yang memiliki warna dasar gelap, apakah bisa menerapkan cara ini juga?. Tentu saja bisa, namun jika menggunakan cara ini, tentu akan menyebutnya dengan istilah lain, misalnya Day Mode, Mode Terang, Mode siang dll. Saya rasa mungkin sudah cukup penjelasan saya tentang night mode ini dan langsung saja kita menuju ke cara pembuatan dan pemasangannya dibawah ini.

Cara Memasang Night Mode di Blogger [Blogspot]

Seperti biasa, pastikan Anda sudah masuk kedalam akun blogger Anda. Buka Theme lalu klik Edit HTML

1. Tambahkan script berikut sebelum </body>
<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>


2. Selanjutnya tambahkan Kode CSS ini sebelum </head>
<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Keterangan :

Pada 2 kode .nightmode .class-baru{} adalah kode yang bisa Anda gunakan untuk menambahkan element baru yang ingin di ikutkan pada saat menekan tombol night modenya. Silakan ubah kode .class-baru dengan elemen class atau ID HTML yang ingin ikutkan menjadi night mode. Misalanya pada contoh berikut:
.nightmode .popular-post h2{background:#222}

.nightmode .Post-body h1{color:#fff}

.nightmode .Post-body th {color:#555}

Silakan atur juga posisi tombol nigth modenya
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}


Membuat Dark Mode Responsive SEO Friendly

Berikut ini adalah cara kedua yang bisa diterapkan pada template Viomagz 3.3.0 atau versi terbaru dan sejenisnya. Cara ini sudah saya gunakan dan berhasil pada template viomagz. Berikut tutorialnya:

1. Pastekan kode CSS Berikut sebelum ]]</b:skin>
/* dark */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:45px;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;}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear;}
.iconmode:hover{border-radius:100px;}
.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;}
.Night{background:#0c0c0c;color:#fff;}
.Night #wrapper{background:#121212;color:#ddd;}
.Night #header-container{background:#000;color:#ddd;}
.Night #cssmenu ul ul li{background:#121212;}
.Night #cssmenu ul ul li a{color:#fff;background:#121212;}
.Night #cssmenu ul li{background:#000;}
.Night #cssmenu ul li a,#cssmenu ul ul li a{color:#ddd;}
.Night .above-post-widget h2{color:#ddd;}
.Night .latest-post-title h2{color:#ddd;}
.Night h2.post-title a{color:#ddd;}
.Night h1.post-title{color:#ddd;}
.Night .sidebar h2{color:#ddd;}
.Night .sidebar-sticky h2{color:#ddd;}
.Night .sidebar h2,.Night .sidebar-sticky h2{border-bottom:2px solid #ddd;}
.Night .sidebar h2::before,.Night .sidebar-sticky h2::before{background-color:#ddd;}
.Night .artikel-terbaru a{color:#ddd;}
.Night .artikel-terbaru a:hover{color:#0078d4;}
.Night .artikel-terbaru ul li::before{color:#ddd;}
.Night .PopularPosts ul li a{color:#ddd;}
.Night .author-profile >span{color:#595959;}
.Night .tableOfContent{border-color:rgba(255,255,255,.1);background-color:#15202b;}
.Night .tableOfContent #tocContent a{color:#fff;}
.Night .tableOfContent #tocContent ol ul:before,.post-body .tableOfContent ol ol:before,.post-body .tableOfContent #tocContent ul ol:before,.post-body .tableOfContent ul ul:before{border-left:1px dashed rgba(234,228,228,0.2);}
.Night .comments h3{color:#fff;}
.Night #Related ul li a.judul{color:#fff;}
.Night #Related ul li a.judul:hover,#Related ul li:hover a.judul{color:#fff;}
.Night #comments .comment .comment-content,.comment .comment-body{color:#fff;}
.Night #footer-wrapperx{background:#000;}
.Night #footbawah{background:#121212;color:#fff;}
.Night #footbawah a,.Night .Profile .profile-link,.Night .Profile .profile-name-link,.Night .related-post-style-3 .related-post-item-title{color:#ddd;}

2. Selanjutnya, Simpan kode Java Script berikut sebelum </body>
<script>
//<![CDATA[
$(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>

3. Selanjutnya, tambahkan kode HTML Nightmode ini tepat diatas atau sebelum kode </header>
<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. Sekarang save dan lihat hasilnya.

Untuk jenis SVG icon dan peletakan tombol dark mode ini bisa diubah sesuai selera. Silakan Anda berkreasi sendiri. Tentunya jangan lupa untuk memback-up template sebelum melakukan perubahan.

Tambahkan Efek Bintang Jatuh Pada Night Mode

Ini merupakan salah satu request dari teman blogger yang sudah memasukkan email untuk dibuatkan tutorial untuk menambahkan efek bintang jatuh ketika tombol night / dark mode diklik atau pada saat mode dark dalam kondisi ON. Silakan simak tutorialnya dibawah ini.

1. Copy dan pastekan kode berikut sebelum ]]</b:skin> atau sebelum </style> 
.section-center{position:fixed;width:100%;height:100%;top:50%;left:50%;display:none;overflow:hidden;z-index:5;pointer-events:none;box-shadow:0 0 50px 5px rgba(255,148,0,.1);transform:translate(-50%,-50%)}
.section-center{-webkit-transition:all 500ms linear;transition:all 500ms linear}
.shooting-star{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:-70px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar 6s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.shooting-star-2{z-index:2;width:1px;height:50px;border-bottom-left-radius:50%;border-bottom-right-radius:50%;position:absolute;top:0;left:200px;background:linear-gradient(to bottom,rgba(255,255,255,0),white);animation:animShootingStar-2 9s linear infinite;-webkit-transition:all 2000ms linear;transition:all 2000ms linear}
.star{z-index:2;position:absolute;top:185px;left:25px;background-image:url('https://ivang-design.com//svg-load/air/star.png');background-size:15px 15px;width:15px;height:15px;opacity:0.4;animation:starShine 3.5s linear infinite;-webkit-transition:all 1200ms linear;transition:all 1200ms linear}
.star.snd{top:100px;left:310px;animation-delay:1s}
.star.trd{top:130px;left:100px;animation-delay:1.4s}
.star.fth{top:190px;left:200px;animation-delay:1.8s}
.star.fith{top:85px;left:1080px;animation-delay:2.2s}
@keyframes animShootingStar{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1280px) translateX(1280px) rotate(-45deg);opacity:1;height:800px}}
@keyframes animShootingStar-2{from{transform:translateY(0px) translateX(0px) rotate(-45deg);opacity:1;height:5px}to{transform:translateY(1920px) translateX(1920px) rotate(-45deg);opacity:1;height:800px}}
@keyframes starShine{0%{transform:scale(0.3) rotate(0deg);opacity:0.4}25%{transform:scale(1) rotate(360deg);opacity:1}50%{transform:scale(0.3) rotate(720deg);opacity:0.4}100%{transform:scale(0.3) rotate(0deg);opacity:0.4}}

2. Selanjutnya, tambahkan kode pemanggil HTML berikut sebelum </body>
<div class='section-center'> 
 <div class='shooting-star'/>
 <div class='shooting-star-2'/>
 <div class='star'/>
 <div class='star snd'/>
 <div class='star trd'/>
 <div class='star fth'/>
 <div class='star fith'/>
</div>

Demikian tutorial kali ini tentang cara memasang Dark Mode / Nigh Mode untuk blogger dengan style keren dan penambahan efek bintang jatuh. Semiga bermanfaat. Terimakasih.


Sumber kode :
https://www.arlinadzgn.com/2019/10/cara-membuat-night-mode-di-blogger.html https://inwepo.co/membuat-night-mode-dengan-efek-bintang-jatuh-di-blogger/
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed