How to Make Floating Night Mode Features on Blogger

How to Make a Night Mode Floating Feature on Blogger - there are already many tutorials on how to create a night mode on blogger, but the admin gives a tutorial that is quite different, that is, a floating or floating feature.


Night Mode on bloggers is indeed the same as the night mode feature on other applications, namely: to save battery life and reduce the light on your smartphone screen.

Alright, there's no need to say much more, let's just go straight to the article, so consider the following article carefully so that it's not wrong in the installation.

HOW TO INSTALL FLOATING NIGHT MODE FEATURES IN BLOGGER

First, log into Blogger > Theme menu > click Edit HTML button , add CSSbelow right above the code ]]></b:skin> or </style>

/* Button Night Mode*/
.btn-nightmode{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:10px;border-radius:50%;background:#00A3FE;text-align:center}
.btn-nightmode svg{width:24px;height:24px;vertical-align: -5px;background-repeat: no-repeat !important;content: ''}
.btn-nightmode svg path{fill:#fff}
.check {display: none}
.btn-nightmode .iconmode .openmode{display:block}
.btn-nightmode .iconmode .closemode{display:none}
.btn-nightmode .check:checked ~ .iconmode .openmode{display:none}
.btn-nightmode .check:checked ~ .iconmode .closemode{display:block}
/* Night Mode */
.Night{background:#202124;color:rgba(255,255,255,.9)}
.Night blockquote,.Night kbd{background:#17181a;color:rgba(255,255,255,.9)}

To add more CSS add CSS1 .Night sample tags .Night, .Night CSS2 {background: #fff}

Next, add the HTML and JavaScript code below right above the code </body>

<div class='btn-nightmode'><input class='check' id='btn-nightmode' title='Night Dark' type='checkbox'/>
<label class='iconmode' for='btn-nightmode'>
<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='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z'/></svg>
</label>
</div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#btn-nightmode").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")?$("#btn-nightmode").prop("checked",!0):$("#btn-nightmode").prop("checked",!1)});
//]]>
</script>

Finally save the Theme and see the results, for a demo can be seen in this blog.

Thus the tutorial on how to create a floating night mode feature in blogger this time, if you have trouble doing the installation do not forget to comment below.