Cách tạo chế độ ban đêm trên Blogger bằng Cookie

Cách tạo chế độ ban đêm trên Blogger bằng Cookie: Chế độ ban đêm là một tính năng nhằm làm cho màn hình tối. Tính năng này thường được tìm thấy trên các thiết bị di động có chức năng Chế độ ban đêm hoặc Chế độ tối có lợi ích tiết kiệm pin sử dụng.

Đối với những người quan tâm đến việc cài đặt tính năng Chế độ ban đêm, vui lòng làm theo các bước dưới đây.

 Cách tạo chế độ ban đêm trên Blogger bằng cookie:

Trước tiên mở trang blogger -> Nhấp vào menu Chủ đề và nhấp vào nút Chỉnh sửa HTML  -> thêm mã này trước thẻ </body>

<div class='Switchbtn'>
<span class='nightly'>Night Mode</span> <input class='togglenight togglenight-switch' id='nightmode' type='checkbox'/>
<label class='togglenight-btn' for='nightmode'/></div>
<script type='text/javascript'>
//<![CDATA[
// Night Mode
$("#nightmode").click(function(){$("body").toggleClass("nightmode")}),$("body").toggleClass(localStorage.toggled),$("#nightmode").click(function(){"nightmode"!=localStorage.toggled?($("body").toggleClass("nightmode",!0),localStorage.toggled="nightmode"):($("body").toggleClass("nightmode",!1),localStorage.toggled="")});
//]]>
</script>

Sau đó thêm mã Css này trước thẻ </head>

<style type='text/css'>
/* Night Mode */
.nightly{color:#999;font-size:13px}
.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}
.togglenight{display:none;}
.togglenight + .togglenight-btn{outline:0;display:inline-block;width:45px;height:10px;position:relative;cursor:pointer;margin-left:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.togglenight + .togglenight-btn:after,.togglenight + .togglenight-btn:before{position:relative;display:block;content:&quot;&quot;;width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:&#39;&#39;;border-radius:100px;background:#887fff;transition:left 0.3s cubic-bezier(0.175,0.885,0.32,1.275),padding 0.3s ease,margin 0.3s ease;position:absolute;width:20px;height:20px;top:-5px;left:0;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.togglenight-switch:checked + .togglenight-btn{background:rgba(255,255,255,.15)}
.togglenight:checked + .togglenight-btn:after{content:&#39;&#39;;left:55%;background:#ff9f43}
.nightmode{background:#202124;color:rgba(255,255,255,.7)}
.nightmode a{color:rgba(255,255,255,.7)!important}
.nightmode a:hover{color:rgba(255,255,255,.4)!important}
.nightmode .class-baru{}
.nightmode .class-baru{}
</style>

Lưu ý mã được đánh dấu, mã là một ví dụ về mã mà bạn có thể chỉnh sửa bằng cách thay thế .class-baru bằng một lớp hoặc ID trong một phần cụ thể của mẫu. Vui lòng thêm .nightmode trước lớp hoặc ID của phần mẫu mà bạn muốn thay đổi khi Chế độ ban đêm được kích hoạt. 

Ví dụ như thế này:

.nightmode .header{background:#222}

.nightmode .title{color:#fff}

dst...

Đồng thời chỉnh sửa mã CSS này để xác định vị trí của nút Chế độ ban đêm

.Switchbtn{position:fixed;text-align:center;display:inline-block;align-items:center;z-index:100;right:20px;top:20px}

Khi bạn chỉnh sửa xong mọi thứ bạn cần, hãy nhấp vào nút lưu kết quả!. Chúc bạn thành công.