Dark mode pada sebuah halaman website berguna untuk membantu penglihatan mata saat anda mengakses konten di website tersebut, dan sekarang Menggunakan dark mode pada tampilan website sangat digemari jika anda berminat untuk menerapkan pada blog anda saya akan memberikan cara untuk Membuat tampilan Dark mode pada blog anda
Cara Penerapan
Simak baik baik penjelasan berikut untuk diterapkan pada blog anda, dalam membuat mode dark diblogger
- Pasang Jquery terlebih dahulu dengan meletakkan kode ini tepat diatas kode </head>
- Selanjutnya cari kode ]]></b:skin> atau kode </style> dan letakkan kode CSS berikut tepat diatasnya
- Kemudian Cari kode </header> dan letakkan kode dibawah ini tepat diatasnya
- Terakhir Letakkan kode script dibawah ini tepat diatas kode </body>
- Simpan Template anda jika anda telah menaruh dan meletakkan semua script kode seperti diatas, dan lihat hasilnya
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
Ingat ya pasang Jquery jika anda belum memasangnya pada Blog anda
/* Code CSS Mode Dark */
.proIcloudice-gelap{
display:inline-block;
float: right;
margin-top: 3px;
position:absolute;
right:45px;
top: 0;
z-index:999;
}
.proIcloudice-gelap svg{
width:24px;
height:24px;
vertical-align: -5px;
background-repeat: no-repeat !important;
content: '';}
.proIcloudice-gelap svg path{
fill:#fff;
}
.proIcloudice-gelap .check:checked ~ .NavMenu{
opacity:1
visibility:visible;
top:45px;
min-width:200px;
transition:all .3s ease;
z-index:2;
}
.proIcloudice-iclonGelap {
cursor: pointer;
display: block;
padding: 8px;
background-position: center;
transition: all .5s linear;}
.proIcloudice-iclonGelap: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;
}
.proIcloudice-gelap .pro-iclonGelap .openmode{
display:block;
}
.proIcloudice-gelap .proIcloudice-iclonGelap .closemode{
display:none;
}
.proIcloudice-gelap .check:checked ~ .proIcloudice-iclonGelap .openmode{
display:none;
}
.proIcloudice-gelap .check:checked ~ .proIcloudice-iclonGelap .closemode{
display:block;
}
.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 .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 #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 #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 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;}
<!-- Tombol Dark Mode -->
<div class='proIcloudice-gelap'><input class='check' id='proIcloudice-gelap' title='Dark mode' type='checkbox'/>
<label class='proIcloudice-iclonGelap' for='proIcloudice-gelap'>
<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>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#proIcloudice-gelap").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")?$("#proIcloudice-gelap").prop("checked",!0):$("#proIcloudice-gelap").prop("checked",!1)});
//]]>
</script>
Contoh Tampilan
Baiklah sebagai pelengkapnya admin akan memberikan contoh demo atau contoh tampilan mode darknya, contoh tampilan nya sebagi berikut
Info: Bagaiamana sobat dengan tampilan mode darknya keren bukan
Begitulah bagaimana cara membuat tampilan Dark mode pada blog semoga bermanfaat dan bisa diterapkan di situs blog kesayangan anda