On this occasion, I will give a tutorial on how to make dark mode on the blog.
Many of the bloggers who try to present a content so that the visitors are more comfortable, not only content but they also try to enhance the appearance of the blog. One example is to create a dark mode display on a blog.
This dark mode feature is useful for changing the theme of the blog to dark so that the lighting is reduced, this feature itself is very good for visitors.
Well, if you are interested in making dark mode like footprint, you can follow the steps below.
How to make a dark mode on the blog
Step 1: log in to your blogger account
Step 2: go to Themes >> Edit HTML
Step 3: copy the code below, then paste the code directly above the code / * NAV MENU * /
/* Button Dark Mode Jejakdzgn */
.modedark{display:inline-block;float: right;margin-top: 3px;position:absolute;right:30px;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 Jejakdzgn */
.Night
.Night body {background:
.Night
.Night {background:
.Night
.Night
.Night
.Night
.Night
.Night .teknsearch .search .check:checked ~ .icon > svg path{fill:
.Night .breadcrumbs {background:
.Night .img-thumbnail img {background:
.Night .post{background:
.Night h2.post-title a {color:
.Night h2.post-title a:hover {color:
.Night h1.post-title {border-image: linear-gradient(to right,transparent,
.Night .post-snippet {color:
.Night .post-info {color:
.Night .post-body {color:
.Night blockquote {background:
.Night .idnxmusNavigation .NavMenu ul li.xprofil {background:
.Night .idnxmusNavigation .NavMenu ul li.xprofil ul li.name {background:
.Night .idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:hover {padding:none;}
.Night .idnxmusNavigation .NavMenu ul li:hover {background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;;color:
.Night .idnxmusNavigation .NavMenu {background:
.Night .idnxmusNavigation .NavMenu ul li a {color:
.Night .idnxmusNavigation .NavMenu ul li.social {background:
.Night .idnxmusNavigation .NavMenu:before,.idnxmusNavigation .NavMenu:after {border:none;}
.Night .idnxmusNavigation label:hover {border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;}
.Night .idnxmusNavigation label:active {border-radius:100px;background-color:
.Night .idnxmusNavigation .NavMenu img {border:1px solid
.Night .tabbed-toc .toc-content,
.tabbed-toc .toc-line {width: 80%;float: right;background-color: transparent;border-left: 5px solid rgba(64,64,64,0.1);box-sizing: border-box;}
.Night .label-info svg path{fill:
.Night .status-msg-body {background:
.Night .popular-posts {background:
.Night .popular-posts ul li a:hover {background:
.Night .PopularPosts .widget-content ul li {border-top: 1px solid rgba(255,255,255,0.12);}
.Night .author-profile {background:
.Night .author-profile .writer-name {color:
.Night .writer > span {color:
.Night .latest-post-title h2 {background:
.Night .PopularPosts h2 {background:
.Night .sidebar h2 {background:
.Night .comments h3 {background:
.Night h1.post-title {color:
.Night .contact-form-error-message-with-border {background:
.Night .contact-form-email {background:
.Night .contact-form-name {background:
.Night .contact-form-email-message {background:
.Night div.Label h2 {border-bottom: 1px solid rgba(255,255,255,0.12);}
.Night div.Label {background:
.Night .list-label-widget-content ul li a {background:
.Night .list-label-widget-content ul li a:hover{background:
.Night .related-post-style-3 .related-post-item-title {color:
.Night
.Night
.Night
.Night
.Night .commentBodyContainer {background:
.Night
.Night .comments .comments-content .icon.blog-author::after {color:
.Night .comments .comments-content .user {color:
.Night .comments .comment-block {background:
.Night .comments .thread-toggle {background:
.Night .comments .comment .comment-actions a {background:
.Night .comments .comment .comment-actions a:hover, .comments .continue a:hover{background:
.Night .comments .comments-content .comment-content {color:
.Night .comments .comments-content .comment-header {border-bottom: 1px solid rgba(255,255,255,0.12);}
.Night [class~=pesan-jejak] {background:
.Night .pesan-jejak h5 {color:
.Night .pesan-jejak h5:before {color:
Step 4: Then copy the code below, then paste the code directly above the code </header>, if the code </header> contains the code <div class = 'clear' />, then paste it above the code <div class = 'clear '/>
<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='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'/></svg>
</label>
</div>
Step 5: Next copy the code below, then paste the code directly above the code </body>
<script type='text/javascript'>
$(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>
Step 6: Save
The final word :
Until here the tutorial on how to make dark mode on the blog, the tutorial that I gave this I have tried on my blog, so the results can be ascertained successful, if you want to see a demo, can see below.