Skip to content Skip to sidebar Skip to footer
Home / Blogger Tutorial / CSS

How to Make Dark Mode Feature (Night Mode) in Blogger

Posted by Smart Help Website Post a Comment
How to Make Dark Mode Feature (Night Mode) on Blog

Having a feature to activate night mode on your blog can provide benefits for your blog visitors. Not only that, you may only find this dark mode feature in cool blog templates, so it looks very professional in managing a blog.

The dark mode feature that I will use here uses cookies, so that when it is refreshed on the web it will not return to bright mode, but remains in night mode. In contrast to other night modes which if refreshed will return to the initial mode. For those of you who want to try and beautify your blog, you can follow the method below.

How to Make Dark Mode Feature (Night Mode) on Blog

NOTE: Before changing the contents of your template, it would be nice to first back up the original template. Because, each template will have slightly different html & css. So, if this night mode css doesn't work in the template you're using now, you can restore the template that was backed up earlier.

REQUIRED: Before installing night mode CSS, it's a good idea to check in your HTML whether there is a jQuery code like the one below ?

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

If it's already there, you don't need to install it, but if it's not there, please copy it and place it above the </body> code. The method is as below.

  • Open blogspot via blogger.com.
  • In the blogspot dashboard, select the Themes > Edit HTML option.
  • If the html is already open, press the CTRL + F keys, to bring up the search field.
  • Look for the code </body>.
  • Paste the code <script src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> just above the code </body>.
  • If you have pasted the jQuery code above, the next step look for the code ]]></b:skin>
  • Then copy the css below, and paste it just above ]]></b:skin>

 /* Button Dark Mode by. seo-formula */
.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;
}
/* Componen Website yang ingin di Dark 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;}

/* Animasi Bintang Dark Mode by. Wahyu Development */
.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;
 }
}

  • If you have pasted all the code above, preview it first. If there are no errors, it means that the code can be embedded in your template.
  • Save Theme.
  • The next step, find the code </header>.
  • Then, take the CSS below, and paste it just above the </header>.

 <div class='modedar'><input class='check' id='modedar' title='Mode Dark' type='kotak centang'/>
<label class='iconmode' for='modedar'>
<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>

  • The last step, find the code </body>.
  • Then paste the css below just above </body>.

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

  • Preview the theme, then save.

NOTE: Creating a night mode feature requires jQuery code in your template. So, if night mode doesn't appear, it's possible that your template doesn't have jQuery code yet. Take the jQuery code above and save it right above the </body> code or you can also save it above the </head>.

There are many ways to create a night mode or dark mode feature in blogspot. If this method doesn't work, you can use a different method. Please check all my articles regarding CSS or Blogger Tutorials.
Location: Kota New York, New York, Amerika Serikat

Post a Comment for "How to Make Dark Mode Feature (Night Mode) in Blogger"