Tạo chế độ ban đêm Night Mode cho Blogspot đơn giản nhất


Chế độ ban đêm là làm cho màn hình tối, tính năng này chúng ta thường gặp trên thiết bị di động nhúng chức năng Chế độ Ban đêm hoặc Chế độ tối chúng có rất nhiều lợi ích vì tiết kiệm sử dụng pin và tạo điểm nhấn cho Blog của bạn.

Hiện nay có rất nhiều website dùng chế độ này để tạo điểm nhấn cho web của mình. Trên Blogspot hiện cũng khá nhiều bạn đang dùng chế độn này cho BLog của mình.

Hôm nay Blog thủ thuật F4vnn xin chỉ cho các bạn một cách đơn giản để tạo cho mình chế độ ban đêm này nhé

Tạo chế độ ban đêm cho Blogspot

Đầu tiên, mở trang Blogger – Nhấp vào Chủ đề và nhấp Chỉnh sửa nút HTML

che do ban dem cho blogspot

Tiếp theo các bạn tìm đến thẻ </body> sau đó thêm đoạn mã sau vào trên nó

<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 đoạn CSS bên dưới vào 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:"";width:50%;height:100%}
.togglenight-switch + .togglenight-btn{background:#d5d2fc;border-radius:99em;transition:all .4s ease}
.togglenight-switch + .togglenight-btn:after{content:'';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:'';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>

Chú ý : Các bạn có thể chỉnh sửa theo ý của các bạn

.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 Night Mode

.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, nhấp vào Lưu nút chủ đề và xem kết quả trên blog của bạn. Với các đoạn mã trên các bạn chỉ cần làm theo hướng dẫn là các bạn có thể tạo chế độ Night Mode cho Blog của mình

Tổng hợp Template BLogspot 2019 : Tại đây

Xem thêm : Tại Đây

f4vnn.com chúc các bạn thành công!

cropped logo 4


Welcome to F4vnn.com - Blog Thủ Thuật, tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ với và chúng tôi sẽ xóa bài viết ngay lập tức . Liên lạc với Admin qua mail: hoangvansy90@gmail.com!

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!