Cara Membuat tombol Night Mode di Blogger
Baru baru ini banyak sekali blog yang menggunakan fitur night mode, fitur blog yang satu ini banyak di minati para blogger hanya untuk memperindah tampilan dan memberikan sensasi yang berbeda pada blognya, sehingga para pengunjung betah dan nyaman saat membacanya.
Cara pemasangannya pun tidaklah terlalu sulit asalkan anda bisa teliti cara meletakkan kodenya. Jika anda yang gemar edit html,Tidak salahnya kan mencoba 😁 ...
Silahkan bagi anda yang tertarik dan penasaran untuk mengaktifkan fitur night mode ini, anda bisa mengikuti cara berikut ini :
- Cara Membuat Night Mode di Blogger
- Masuk ke Blogger akun anda
- Buka Menu Tema.
- Lalu klik tombol Edit HTML.
- Cari kode ]]></b:skin>
- Jika sudah ketemu letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
 |
| Gambar 1 |
Lihat seperti gambar 1 di atas
- Untuk dark mode bintang pasang tepat di atas kode ]]></b:skin>
/* Dark Mode Bintang */
.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;
}
}- Selanjutnya silahkan cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>
 |
| Gambar 2 |
Lihat seperti gambar 2 di atas
<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>
- Untuk tahap berikutnya sekarang tinggal anda pasang scrips JS di bawah ini dan letakan tepat di atas kode </body>
lihat seperti gambar dibawah ini
 |
| Gambar 3 Lihat gambar3 di atas |
<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>
- Jika kode di atas sudah di semua, Untuk selanjutnya silahkan anda cari kode </head> dan pasang kode jQuery dibawah ini bagi anda yang belum memasang nya. Letakkan tepat di atas </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<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>
Posting Komentar untuk "Cara Membuat tombol Night Mode di Blogger"