Lompat ke konten Lompat ke sidebar Lompat ke footer

[Dark mode] cara membuat fitur mode malam, gelap di website blogger

Mode malam atau gelap, saat ini memang sangat berfungsi bagi pemilik sebuah website, di mana fungsi dari mode gelap atau malam ini bisa merubah tampilan sebuah website yang awalnya terang menjadi gelap, dan dapat di lihat dengan baik di saat malam hari maupun di ruangan gelap sehingga tidak merusak mata bagi seseorang yang membacanya di kegelapan bakan tidak terasa sakit dimata, untuk membuat mode malam dengan efek bintang sangat mudah di lakukan. berikut cara menerapkan mode malam atau nigh mode pada sebuah blog.


Mode gelap, malam, nigh mode

Cara memasang mode gelap pada blogger.
- Masuk ke akun blogger.
- Silahkan pilih menu tema, dan klik EDIT HTML.
- Silahkan Cari kode  ]]></b:skin> dengan menekan CTRL+F pada mode HTML, dan masukan kode   di bawah tepat di atas kode tersebut.


  </* Button Dark Mode masrodi */
.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:75px;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 masrodi */
.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;}>

- Setelah memasang kode di atas kita akan membuat button atau tombol dark modenya, silahkan cari kode </header> dan letakan kode di bawah ini tepat di atasnya

- Jika kode di atas sudah kamu terapkan sekarang tinggal anda pasang scrips JS di bawah ini dan letakan di atas kode </body>


- Jika kode di atas sudah di terapkan silahkan cari kode </head> dan pasang kode dibawah bagi anda yang belum menambah/menginstal jquery.min.js

Jika sudah di terapkan semua silahkan anda save atau simpan hasilnya 
-  Untuk Membuat efeck Bintang silahkan anda cari kode  ]]></b:skin> dan letakan kode di bawah tepat di atasnya
- Jika sudah silahkan cari kode </body> dan letakan kode di bawah ini tepat di atasnya

- Jika semua sudah anda pasang silahkan save dan lihat hasilnya.