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

Chế độ ban đêm hoặc Chế độ ban đêm là một tính năng có thể thay đổi giao diện của trang Blog thành màu tối. Tương tự như trên các trang web truyền thông xã hội Instagram, Twitterhoặc Pinterest. Nói chung để cài đặt tính năng này sẽ cần rất nhiều mã JavaScript có khả năng làm cho việc tải web chậm hơn một chút. Khác nhau nếu nút này được thực hiện với một chút tính năng cookie.

Cookie này có chức năng gì?

Tính năng Cookie này sau đó sẽ hoạt động để lưu trữ dữ liệu khách truy cập đằng sau hậu trường. Đó là nếu ai đó mở trang web của bạn và cũng đã kích hoạt nó Chế độ ban đêm, nó sẽ vẫn còn với màn hình. Mặc dù nó đã thay đổi các trang và tải lại nhiều lần.

Tất nhiên, điều này sẽ làm giảm nhẹ việc tải web, không cần phải tải các trang khó.

Vâng, nhân dịp này, tác giả sẽ đưa ra một hướng dẫn ngắn Cách tạo nút Chế độ ban đêm bằng Cookies trên Blogger. Nếu bạn quan tâm đến việc làm nó, bạn có thể xem trong hướng dẫn sau đây.

Cũng đọc: Cách tạo một nút Switch Chế độ tối mát mẻ trên Blogger

Các bước:

1. Đăng nhập vào tài khoản Blogger → Chủ đề → Chỉnh sửa HTML

2. Sao chép và dán mã CSS Style bên dưới trước mã ))> hoặc

 </p><style type='text/css'>/ * Nút Dark Mode * / .modingark {display: inline-block; float: right; margin-top: 3px; vị trí: tuyệt đối; phải: 45px; top: 0; z-index: 999;}. modedark svg {width: 24px; chiều cao: 24px; căn dọc: -5px; lặp lại nền: không lặp lại! quan trọng; nội dung: ''; }. đường dẫn Svg modedark {điền: #fff; }. modedark. check: đã kiểm tra ~ .NavMothy {opacity:1; tầm nhìn: nhìn thấy được; trên cùng: 45px; chiều rộng tối thiểu: 200px; chuyển tiếp: tất cả .3s dễ dàng; chỉ số z:2; } .iconmode {con trỏ: con trỏ; hiển thị: khối; phần đệm: 8px; vị trí nền: trung tâm; chuyển tiếp: tất cả .5s tuyến tính; } .iconmode: hover {Border-radius: 100px; nền: rgba (0,0,0,.2) radial-gradient (hình tròn, trong suốt 2%, rgba (0,0,0,.2) 2%) trung tâm / 15000%; }. kiểm tra {display: none; }. modedark .iconmode .openmode {display: block; }. modedark .iconmode .closemode {display: none; }. modedark. check: đã kiểm tra ~ .iconmode. chế độ mở {display: none; }. modedark. kiểm tra: đã kiểm tra ~ .iconmode .closemode {display: block; } / * Chế độ tối màu Jagoandzgn * / .Night # Wrapper {nền: # 292e38;} .Night # HTML3 {nền: # 1d2129;} .Night # footer-widget-container {nền: # 1d2129;} .Night .share -this-Pleaseeeee {nền: # 292e38;} .Night .related-post h4 {nền: # 292e38;}. Đêm # nhãn-thông tin-th {nền: # 1d2129;} .Night body {nền: # 1d2129;} .Night. Post-body {color: #cccccc}. Night # read-cũng h2 {color: #cccccc; background: # 1d2129}. Night. Label-information-th a {color: #cccccc; background: # 3d4658} .Night li.recent-post a {color: #cccccc}. Night .recent-post-title h2 {color: #cccccc} .Night. Recent_Post_Mas_Tamvan. Recent-post-mas-tamvan span.mastamvan_title a {color: #cccccc } nền: # 1d2129} .Night. post-information {color: #cccccc}. Night {background: # 1d2129;}. Night h2.post-title a {color: # 9e9e9e;} .Night h2.po st-title a: hover {color: # f17f43} .Night. post-title {color: # 1e90ff}. Night ul.nav-social {color: # 1d2129} .Night. post-snippet {color: #cccccc}. Đêm #ignielNewsletter {nền: # 292e38;} .Night # Label1 {nền: # 292e38;} .Night .post {nền: # 292e38; viền-dưới-màu: # 252a33;} .Night. PopularPosts h2 {nền: # 343944;} .Night .latest-post-title h2 {nền: # 292e38; viền-dưới-màu: # 313640;} .Night. Dramaptext {color: # 9e9e9e} .Night. PopularPosts h2 span {color: # 9e9e .Night. List-nhãn-widget-content ul li {Border-bottom-color: # 313640;}. Night. Img-hình thu nhỏ img {nền: # 252931 gradient tuyến tính (bên phải, rgba (255, 255, 255, 0) 5%, rgb (49, 54, 64) 20%, rgba (255, 255, 255, 0) 30%); kích thước nền: 800px 104px;} .Night #ignielNewsletter. Medsos__ {Border-top-color: # 313640;} .Night # footer-container {nền: # 12161f;} .Night # footer-navmenu { nền: # 171b25;} .Night. sidebar h2 {color: # b7b7b7; Border-bottom-color: # 313640;}. Night. sidebar-stick 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. Spreadcrumbs {color: # b7b7b7; Border-bottom-color: # 313640;} .Night .btnsocialshare ;}. Đêm. Nhãn-line :: trước {nền: # 1d2129;}. Đêm. Nhãn-line-c :: trước {nền: # 333740;}. Đêm a.showcontent: hover {nền: # 373a42;} .Night a.showcontent {nền: # 292e38} .Night #ignielNewsletter đầu vào {nền: # 272b33; viền màu: # 2b303a;} .Night .comments .comments-content .comment-content {color: #ffffff} .Night tại v # Label1 h2 {Border-bottom: 1px solid # 272b33; nền: # 343944;}. Đêm .related-post-style-3 .related-post-item-title {color: #bbb;}. Night # read-cũng ul {Border: 2px solid # 333740;} .Night # read-cũng h2 {Border: 2px solid # 292e38;} .Night # nhận xét a.hiddencontent {nền: # 424854;} .Night .comments .comments-content .comment-thread ol {background: # 292e38;} .Night .comments .comments-content .inline-thread {background: # 292e38;}</style><div class='code-block code-block-7' style='margin: 8px auto; text-align: center; display: block; clear: both;'><style>.ai-rotate {position: relative;}
.ai-rotate-hidden {visibility: hidden;}
.ai-rotate-hidden-2 {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback, .ai-list-block, .ai-list-block-ip, .ai-list-block-filter {visibility: hidden; position: absolute; width: 50%; height: 1px; top: -1000px; z-index: -9999; margin: 0px!important;}
.ai-list-data, .ai-ip-data, .ai-filter-check, .ai-fallback {min-width: 1px;}</style><div class='ai-rotate ai-unprocessed ai-timed-rotation ai-7-2' data-info='WyI3LTIiLDJd' style='position: relative;'>
<div class='ai-rotate-option' style='visibility: hidden;' data-index="1" data-name="QWQgQQ==" data-time="MTE=">
<p><center><div class="ads-box">
	<div class="ads-sticky">
<div data-ad="apsachieveonline.org_fluid_lb+sq_1" data-devices="m:1,t:1,d:1" 
class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && 
demandSupply.surge.displayAd('apsachieveonline.org_fluid_lb+sq_1')</script> </div>
</div></center></p></div>
<div class='ai-rotate-option' style='visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;' data-index="2" data-name="QWQgQg==" data-time="MTM=">
<p><center><div class="ads-box">
	<div class="ads-sticky">
<div data-ad="apsachieveonline.org_fluid_lb+sq_2" data-devices="m:1,t:1,d:1" 
class="demand-supply"></div> <script data-debloat-delay="1" type="text/debloat-script">window.demandSupply && demandSupply.surge && 
demandSupply.surge.displayAd('apsachieveonline.org_fluid_lb+sq_2')</script> </div>
</div></center></p></div>
</div>
</div>
<p>

/ * Nút Chế độ tối * /

.modingark{màn hình:khối nội tuyến;phao: đúng;đầu lề: 3px;vị trí:tuyệt đối;đúng:45px;hàng đầu: 0;chỉ số z:999;} .modingark svg{ chiều rộng:24px; chiều cao:24px; căn dọc: -5px; lặp lại nền: không lặp lại quan trọng; nội dung: "; } .modingark đường dẫn Svg{ điền vào:#fff; } .modingark .check: đã kiểm tra ~ .NavMothy{ độ mờ đục:1; tầm nhìn:nhìn thấy; hàng đầu:45px; chiều rộng tối thiểu:200px; quá độ:tất cả .3s dễ dàng; chỉ số z:2; } .iconmode { con trỏ: con trỏ; màn hình: khối; đệm: 8px; vị trí nền: trung tâm; quá độ: tất cả .5s tuyến tính; } .iconmode: di chuột{ bán kính biên giới: 100px; nền: rba(0,0,0,.2) radial-gradient(vòng tròn, minh bạch 2% rba(0,0,0,.2) 2%) trung tâm / 15000%; } kiểm tra { màn hình: không có; } .modingark .iconmode .openmode{ màn hình:khối; } .modingark .iconmode .closemode{ màn hình:không có; } .modingark .check: đã kiểm tra ~ .iconmode .openmode{ màn hình:không có; } .modingark .check: đã kiểm tra ~ .iconmode .closemode{ màn hình:khối; } / * Màu Jagoandzgn chế độ tối * / .Night # trình bao bọc {nền: # 292e38;} .Night # HTML3 {nền:# 1d2129;} .Night # footer-widget-container {nền:# 1d2129;} .Night .share-this-xin vui lòng {nền:# 292e38;} .Related-post h4{nền:# 292e38;} .Night # nhãn-thông tin-th {nền:# 1d2129;} Cơ thể {nền:# 1d2129;} .Night. Hậu cơ thể {màu sắc:#cccccc} .Night # đọc-cũng h2 {màu sắc:#cccccc;nền:# 1d2129} .Night. Nhãn-thông tin-th a {màu sắc:#cccccc;nền:# 3d4658} .Night li.recent-bài viết a{màu sắc:#cccccc} .Night .rec-post-title h2{màu sắc:#cccccc} .Night. Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{màu sắc:#cccccc} .Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {màu sắc:#cccccc;nền:# 1d2129} .Night. Recent_Post_Mas_Tamvan. Recent-post-mas-tamvan. Nội dung widget {màu sắc:#cccccc;nền:# 1d2129} .Night. Thông tin sau {màu sắc:#cccccc} .Night {nền:# 1d2129;} .Night h2.post-title a {màu sắc:# 9e9e9e;} .Night h2.post-title a: di chuột {màu sắc:# f17f43} .Post-title {màu sắc:# 1e90ff} Đêm Ul.nav-xã hội {màu sắc:# 1d2129} .Night. Đoạn trích {màu sắc:#cccccc} .Night #ignielNewsletter {nền:# 292e38;} .Night # Nhãn1{nền:# 292e38;} .Night. Đăng{nền:# 292e38;viền dưới cùng màu: # 252a33;} .Night. PopularPosts h2{nền:# 343944;} .Night .latest-post-title h2{nền:# 292e38;viền dưới cùng màu: # 313640;} .Night. Báo chí{màu sắc:# 9e9e9e} .Night. PopularPosts h2 span{màu sắc:# 9e9e9e} .Night .list-nhãn-widget-content ul li {viền dưới cùng màu: # 313640;} .Night. Img-hình thu nhỏ img {nền: # 252931 độ dốc tuyến tính(để đúng rồi rba(255. 255. 255. 0) 5% rgb(49. 54. 64) 20% rba(255. 255. 255. 0) 30%);kích thước nền: 800px 104px;} .Night #ignielNewsletter .medsos__ {viền màu: # 313640;} .Night # footer-container{nền:# 12161f;} .Night # footer-navmenu{nền:# 171b25;} .Night. Thanh bên h2 {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Night. Thanh bên dính h2 {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Night .latest-post-title h2 {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Night .above-post-widget h2 {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Nội dung h3 {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Night. {màu sắc:# b7b7b7;viền dưới cùng màu: # 313640;} .Night. Xã hội xã hội {nền:# 383c44;} .Night. Dòng nhãn :: trước{nền: # 1d2129;} .Night. Nhãn-line-c :: trước {nền: # 333740;} Đêm A.showcontent: di chuột {nền: # 373a42;} .Night a.showcontent{nền: # 292e38} .Night #ignielNewsletter nhập{nền: # 272b33;màu viền:# 2b303a;} .Night .comments .comments-content .comment-content {màu sắc:#ffffff} Div div # Nhãn1 h2 {đáy biên giới: 1px rắn # 272b33;nền: # 343944;} .Night. Liên quan-bài-phong cách-3 .related-post-item-title {màu sắc: #bbb;} .Night # đọc-cũng ul {biên giới: 2px rắn # 333740;} .Night # đọc-cũng h2 {biên giới: 2px rắn # 292e38;} .Night #comments a.hiddencontent {nền: # 424854;} .Night .comments .comments-content .comment-thread ol {nền: # 292e38;} .Night .comments .comments-content .inline-thread {nền: # 292e38;}

3. Nhập mã JavaScript bên dưới ngay trước mã

 <script type="text/debloat-script" data-debloat-delay="1" data-type="text/javascript">//<!(CDATA(  /* Dark Mode, Mode Malam */  $(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").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")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});  //))></script>

4. Tiếp theo bạn dán mã người gọi bên dưới. Đối với vị trí, bạn có thể điều chỉnh mong muốn của nhau.

Ví dụ, ở đây tôi sẽ đặt nó trong tiêu đề, có thể được dán phía trên mã

 </p>
<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>  <label class='iconmode' for='modedark'>  <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>
<p>

<nhãn lớp học= ='biểu tượng' cho= ='mô-đun'>

</nhãn>

</div>

5. Lưu chủ đề.

Sau đây là màn hình Chế độ ban đêm đã được kích hoạt.

Đó là tất cả các hướng dẫn Cách tạo nút chế độ ban đêm bằng cookie trên Blogger tác giả đã chia sẻ với bạn. Nếu bạn có câu hỏi về bài viết này, đừng ngần ngại bình luận bên dưới. Hy vọng nó hữu ích.

Hướng dẫn khác từ Tác giả:

Cách dễ dàng để mua thẻ Prime bằng cách .U thông qua ứng dụng
Cách kích hoạt tính năng Đăng ký Blog qua tính năng email trong FeedBurner
Cách đăng nhập và sử dụng RDP / VPS Windows trên Android
Cách mua sách / sách điện tử trên Google Play với Gopay
Những cách thiết thực để mở / chạy tệp .Exe trên Android

<! –

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

Hướng dẫn khác từ Tác giả:

Khuyến Khích: