Cara membuat tampilan Dark Mode atau Mode gelap Pada blog

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

1. Pasang Jquery terlebih dahulu dengan meletakkan kode ini tepat diatas kode </head>

<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

2. Selanjutnya cari kode ]]></b:skin> atau kode </style> dan letakkan kode CSS berikut tepat diatasnya

/* 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;}

3. Kemudian Cari kode </header> dan letakkan kode dibawah ini tepat diatasnya

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

4. Terakhir Letakkan kode script dibawah ini tepat diatas kode </body>

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

5. Simpan Template anda jika anda telah menaruh dan meletakkan semua script kode seperti diatas, dan lihat hasilnya

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