Cara Buat Night Mode / Mode Malam dan Efek Bintang di Blog - Mediaachmad

Mediaachmad.com - Cara Buat Night Mode / Mode Malam dan Efek Bintang di Blog Terbaru Update 2020. Dalam Membuat Mode Malam / Dark Mode di situs web atau Blogger sebenarnya cukup mudah. Namun perlu kesabaran untuk memasangnya terutama untuk penyesuaian warna untuk elemen Class tertentu.

Kali ini, untuk Mode Malam yang admin buat agak sedikit spesial untuk teman - teman, karena admin akan tambahkan effect bintang - bintang, ini tidak akan memberatkan website teman - teman jadi sangat Aman untuk digunakan, admin juga menerapkan mode malam ini.

Effect bintang - bintang akan admin bedakan script, jadi Effect bintang ini bisa kalian pasang dan tidak kalian pasang, itu terserah kalian. Langsung saja silakan simak tutorial berikut

Cara Membuat Dark Mode / Mode Malam di Blogger

1. Silakan kalian login ke blogger, dan masuk ke dashboard.
2. Masuk ke menu Tema, Lalu Klik EDIT HTML.
3. Cari Code ]]></b:skin>, Masukan Code CSS dibawah ini di ATAS code tersebut.

/* Dark Mode, Mode Malam by Mediaachmad.com | Wahyu Achmad */
/* Button Dark Mode */
.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;
}
.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;
}
/* Warna Dark Mode */
/* Warna Wanjay.com Night Mode */
.Night #wrapper {background: #292e38;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#292e38;}
.Night .related-post h4{background:#292e38;}
.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:#3d4658}
.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:#9e9e9e;}
.Night h2.post-title a:hover {color:#f17f43}
.Night .post-title {color:#1e90ff}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}
.Night #ignielNewsletter {background:#292e38;}
.Night #Label1{background:#292e38;}
.Night .post{background:#292e38;border-bottom-color: #252a33;}
.Night .PopularPosts h2{background:#343944;}
.Night .latest-post-title h2{background:#292e38;border-bottom-color: #313640;}
.Night .newspaptext{color:#9e9e9e}
.Night .PopularPosts h2 span{color:#9e9e9e}
.Night .list-label-widget-content ul li {border-bottom-color: #313640;}
.Night .img-thumbnail img {background: #252931 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgb(49, 54, 64) 20%, rgba(255, 255, 255, 0) 30%);background-size: 800px 104px;}
.Night #ignielNewsletter .medsos__ {border-top-color: #313640;}
.Night #footer-container{background:#12161f;}
.Night #footer-navmenu{background:#171b25;}
.Night .sidebar h2 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .sidebar-sticky h2 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .latest-post-title h2 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .above-post-widget h2 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .comments h3 {color:#b7b7b7;border-bottom-color: #313640;}
.Night .breadcrumbs {color:#b7b7b7;border-bottom-color: #313640;}
.Night .btnsocialshare {background:#383c44;}
.Night .label-line::before{background: #1d2129;}
.Night .label-line-c::before {background: #333740;}
.Night a.showcontent:hover {background: #373a42;}
.Night a.showcontent{background: #292e38}
.Night #ignielNewsletter input{background: #272b33;border-color:#2b303a;}
.Night .comments .comments-content .comment-content {color:#ffffff}
.Night div#Label1 h2 {border-bottom: 1px solid #272b33;background: #343944;}
.Night .related-post-style-3 .related-post-item-title {color: #bbb;}
.Night #baca-juga ul {border: 2px solid #333740;}
.Night #baca-juga h2 {border: 2px solid #292e38;}
.Night #comments a.hiddencontent {background: #424854;}
.Night .comments .comments-content .comment-thread ol {background: #292e38;}
.Night .comments .comments-content .inline-thread {background: #292e38;}

4. Masih di EDIT HTML. Sekarang kita buat tombol Dark Modenya. Jika template kalian viomagz, ingin meletakkan tombolnya di header kanan atas, Silakan letakkan kodenya di ATAS </header>. Jika template selain viomagz, bisa teman - teman sesuaikan sendiri lokasinya..

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

5. Jika sudah tambahkan script JS berikut ini di ATAS kode </body>
UPDATE Oktober 2019 script JS dibawah : Night mode akan terus berjalan tanpa terpengaruh pindah page

<script type='text/javascript'>
//<![CDATA[
/* Dark Mode, Mode Malam by Mediaachmad.com | Wahyu Achmad */
$(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 kalian BELUM menambah / menginstal jquery.min.js di website kalian, Silakan tambahkan code dibawah ini di ATAS </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

6. Kemudian Simpan Tema

Sekarang kita buat untuk bintangnya.

1. Silakan masuk ke EDIT HTML Lagi.
2. Tambahkan Code CSS dibawah ini di ATAS code ]]></b:skin>. (Gunakan CRTL + F, untuk mencarinya)

/* Dark Mode Bintang, Mode Malam by Mediaachmad.com | Wahyu Achmad */
.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;
 }
}

3. Tambahkan kode HTML dibawah ini di ATAS code </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>

4. Selesai.

Untuk DEMO silakan Teman - Teman bisa klik tombol bulan sabit di kanan atas website ini

Sekarang kalian lihat hasilnya, bila mengalamai kesulitan silakan komen dibawah admin akan mencoba untuk membantu. Mungkin itu yang dapat admin sampaikan sekian dan terima kasih.