Chia sẻ thủ thuật, kiến thức về phát triển bản thân, các loại sách hay nên đọc (ebook), bạn có biết,... và nhiều kiến thức khác.

Theo dõi Đăng kýNếu bạn quan tâm, hãy nhấn nút

Hướng dẫn tạo chế độ Tắt/Mở đèn (Night Mode) cho Blogger

huong dan tao che do tat mo den night mode cho blogger

THỦ THUẬT Dạo gần đây, có nhiều trang đã bắt đầu ứng dụng chế độ Night Mode này nhằm giúp giảm độ sáng màn hình xuống thấp hơn. Nó có tác dụng làm cho đôi mắt của bạn đỡ bị mỏi và tổn hương khi màn hình quá sáng, nhất là khi xem màn hình trong bóng tối.


Chế độ này rất có ích khi bạn muốn đọc truyện, xem phim, lướt mạng xã hội các kiểu,... trong bóng tối hoặc với lý do "mình thích thì mình để nền tối thôi!". Và chế độ này hiện đang được rất nhiều người sử dụng cả trên điện thoại, máy tính, laptop,...

Hiện tại, trang của mình cũng đang sử dụng chế độ này và bạn có thể thử nó. Do đó, mình sẽ chia sẻ cách để các bạn có thể thực hiện thủ thuật này.

Bây giờ, chúng ta cùng thực hiện nhé và hãy chắc chắn là bạn đã đọc hết rồi mới thực hiện nhé, nếu không sẽ rất dễ bị sai đó!

Làm thế nào để tạo chế độ Tắt/Mở đèn cho Blogspot?

Bước 1. Tạo nút bấm Tắt/Mở đèn.

Đầu tiên, bạn hãy chép đoạn mã nút bấm dưới đây vào nơi mà bạn muốn hiển thị.

<button class="sbn-nightmode">Tắt/Mở đèn</button>

Bước 2. Cài đặt Javascript để kích hoạt nút bấm.

Bây giờ, bạn tìm đến thẻ đóng </body> và chép đoạn Javascript dưới đây vào trên thẻ đóng vừa tìm được.

<script>
//<![CDATA[
$(document).ready(function(){
    $("button.sbn-nightmode").click(function(){
        $("body").toggleClass('nightmode-body');
        /* Bạn có thể thêm các đối tượng khác ở đây */
    });
});
//]]>
</script>

Để mình giải thích một tí đoạn Javascript này cho các bạn để bạn có thể dễ dàng tùy biến nha!

Bạn hãy chú ý đoạn mã có chứa những đối tượng màu xanh. Ở đây, mình chỉ làm cho thẻ <body> trong HTML.

Bạn hoàn toàn có thể thêm các thẻ hoặc đối tượng khác bằng cách sao chép đoạn mã đó xuống hàng tiếp theo và thay đổi các thẻ, đối tượng có màu xanh sao cho phù hợp với cấu trúc trang của bạn.

Hình như hơi khó hiểu phải không, mình sẽ lấy đoạn Javascript mà mình đang sử dụng cho các bạn dễ hình dung nha.

<script>
//<![CDATA[
$(document).ready(function(){
    $("button.sbn-nightmode").click(function(){
        $("body").toggleClass('nightmode-body');
        $(".sbn-content").toggleClass('nightmode-content');
        $("#comments").toggleClass('nightmode-comments');
        $("a:link").toggleClass('nightmode-link');
        /* Mình chỉ lấy mấy ví dụ điển hình thôi chứ dài lắm nên lười */
    });
});
//]]>
</script>

Bước 3. Tạo hiệu ứng chuyển đổi màu sắc sáng/tối.

Bây giờ là đến phần quan trong nhất, đó chính là tạo hiệu ứng chuyển màu sáng/tối mỗi khi nhấn nút. Cái này cũng dễ hiểu lắm, cũng giống như là thay đổi màu sắc CSS mỗi khi bạn nhấn nút đó mà.

Bạn hãy chú ý đối tượng màu xanh thứ hai trong mỗi dòng mã, đây chính là đối tượng mà chúng ta cần phải làm. Còn đối tượng màu xanh thứ nhất chỉ là những đối tượng mà bạn muốn chuyển đổi qua lại với đối tượng thứ hai thôi.

Sau khi bạn đã hiểu rồi thì bây giờ chúng ta tiếp tục.

Bạn hãy chép đoạn mã dưới đây vào trước thẻ đóng ]]></b:skin> và mình cũng sẽ lấy ví dụ của mình nên bạn hãy thay đổi theo trang của bạn nhé!

.nightmode {background:transparent!important; font-weight:700; border:none; color:#111}
.nightmode-body {background:#282828!important; color:#fff!important}
.nightmode-content, .nightmode-comments {background:#333!important; border:none!important}
.nightmode-link {color:#ffa500!important}

__________

Vậy là đã xong rồi đó, bạn chỉ cần lưu lại là được. Nếu có gì không hiểu thì cứ để lại nhận xét ở bên dưới, mình sẽ cố gắng để giúp đỡ bạn.

Xin cảm ơn và chúc bạn thành công!

CHỦ ĐỀ:    

0 nhận xét