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.


Tại đây Hùng Coder sẽ chia sẻ các mẹo về Cách tạo chế độ ban đêm trên Blogger bằng Cookies . Ở đây tôi thêm tính năng Cookie để khi chúng tôi làm mới một trang đã được kích hoạt với Chế độ ban đêm, nó sẽ không trở về chế độ ban đầu mặc dù bạn đã thay đổi trang. Thật thú vị phải khô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 hãy 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 mã </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 mã </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>

Hãy chú ý đến mã được đánh dấu, mã là một mã ví dụ 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}

Đồ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 chủ đề và xem kết quả trên blog của bạn.
Nhấp vào nút bên dưới để xem ví dụ về cách triển khai tính năng Chế độ ban đêm trên Blogger. Nhấp vào nút Chế độ ban đêm có vị trí ở góc trên bên phải.
DEMO

Chúc các bạn thành công với tiện ích này :)
Nguồn : Arlinadzgn


Mật Khẩu Mặc Định Để Tải Template Hoặc Apps Nếu Có :
hungcoder.com Hoặc Smile92@

Related Posts