Nút Dark Mode V2 (F5 không mất hiệu ứng) cho Blogspot

Mới hôm qua mình đã chia sẻ đến các bạn nút Dark Mode v1 (sẽ mất hiệu ứng khi F5) nhưng nhận thấy rằng nếu mỗi lần như thế thì ta lại phải click nút đó để kích hoạt lại hiệu ứng tối thì rất mệt và bất tiện. Chính vì thế mình có nhờ đứa em là admin SiinBlog edit lại Javascript để mỗi lần F5 hay tắt/ bật lại blog cũng sẽ không mất hiệu ứng Dark Mode và nếu muốn bật lại thì click lại vào nút đó thôi là được. Thật may mà đã thành công nên ngay bây giờ mình muốn share lại cho các bạn dùng.

Nút Dark Mode V2 (F5 không mất hiệu ứng) cho Blogspot

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm toàn bộ CSS sau trước
]]></b:skin>
/* Button */ #pmicon{z-index:9;position:fixed;padding:0;width:37px;height:37px;line-height:37px;bottom:150px;right:20px;overflow:hidden;background:#2a3548;color:rgba(255,255,255,0.85);font-size:25px!important;border:none;border-radius:3px;-webkit-transform: translateZ(0);transition:all .5s ease-out;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s} #pmicon:before{content:'\f186';font-family:FontAwesome;color:#fff} #pmicon:hover{background:rgba(42,53,72,0.5);color:rgba(255,255,255,1)} button#pmicon{animation:pulse 1.5s infinite;box-shadow:0 0 0 rgba(51,51,51,0.7);cursor:pointer;outline:0} @keyframes pulse{0%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0.7);box-shadow:0 0 0 0 rgba(51,51,51,0.7)}70%{-moz-box-shadow:0 0 0 10px rgba(51,51,51,0);box-shadow:0 0 0 10px rgba(51,51,51,0)}100%{-moz-box-shadow:0 0 0 0 rgba(51,51,51,0);box-shadow:0 0 0 0 rgba(51,51,51,0)}} .ripplelink{position:relative;overflow:hidden;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;z-index:0} /* Dark Mode */ .darkmode-body{background:#141d26!important;color:#bdbdbd!important} .darkmode-topmenu,.darkmode-mainmenu,.darkmode-dangki{background:#243447!important} .darkmode-tab,.darkmode-post,.darkmode-sidebartitle,.darkmode-sidebar,.darkmode-sidebartitle1,.darkmode-comment,.darkmode-noiquy,.darkmode-banbe{background:#1b2836!important;color:#bdbdbd!important;border-color:#4f5152!important} .darkmode-link,.darkmode-snippets,.darkmode-postbody,.darkmode-bigtext,.darkmode-h2,.darkmode-commenth5,.darkmode-relatext,.darkmode-search:focus,.darkmode-content{color:#bdbdbd!important} .darkmode-editor{opacity:0.4}.darkmode-editor:hover{opacity:1} .darkmode-ppimg,.darkmode-pcgroup,.darkmode-fb{filter: brightness(70%)}
Bước 3: Dán Javascript sau trước
</body>
<script tyle='text/javascript'> //<![CDATA[ // Darkmode $(document).ready(function(){var a=localStorage.getItem("statusDarkMode");if(a==1){$("body").toggleClass("darkmode-body");$(".header-wrapper2").toggleClass("darkmode-topmenu");$(".mainmenu").toggleClass("darkmode-mainmenu");$("a:link").toggleClass("darkmode-link");$("div.tab").toggleClass("darkmode-tab");$(".post").toggleClass("darkmode-post");$(".sidebar h2").toggleClass("darkmode-sidebartitle");$("#sidebar2 .widget-content").toggleClass("darkmode-sidebar");$(".snippets").toggleClass("darkmode-snippets");$(".post-body").toggleClass("darkmode-postbody");$("span.bigtext").toggleClass("darkmode-bigtext");$("h2.post-title").toggleClass("darkmode-h2");$("a.dangkiblog").toggleClass("darkmode-dangki");$(".sidebar h3").toggleClass("darkmode-sidebartitle1");$("#comments").toggleClass("darkmode-comment");$("#comments h5").toggleClass("darkmode-commenth5");$("#related_img .news-text").toggleClass("darkmode-relatext");$("#comment-editor").toggleClass("darkmode-editor");$("#search_live input").toggleClass("darkmode-search");$(".noiquypc").toggleClass("darkmode-noiquy");$(".noiquycontent").toggleClass("darkmode-content");$(".sidebar .PopularPosts ul li img").toggleClass("darkmode-ppimg");$(".pcgroup img").toggleClass("darkmode-pcgroup");$(".fb-page").toggleClass("darkmode-fb");$("#banbe li").toggleClass("darkmode-banbe")}if(a!=1){$("#darkmode").click(function(){$("body").toggleClass("darkmode-body");$(".header-wrapper2").toggleClass("darkmode-topmenu");$(".mainmenu").toggleClass("darkmode-mainmenu");$("a:link").toggleClass("darkmode-link");$("div.tab").toggleClass("darkmode-tab");$(".post").toggleClass("darkmode-post");$(".sidebar h2").toggleClass("darkmode-sidebartitle");$("#sidebar2 .widget-content").toggleClass("darkmode-sidebar");$(".snippets").toggleClass("darkmode-snippets");$(".post-body").toggleClass("darkmode-postbody");$("span.bigtext").toggleClass("darkmode-bigtext");$("h2.post-title").toggleClass("darkmode-h2");$("a.dangkiblog").toggleClass("darkmode-dangki");$(".sidebar h3").toggleClass("darkmode-sidebartitle1");$("#comments").toggleClass("darkmode-comment");$("#comments h5").toggleClass("darkmode-commenth5");$("#related_img .news-text").toggleClass("darkmode-relatext");$("#comment-editor").toggleClass("darkmode-editor");$("#search_live input").toggleClass("darkmode-search");$(".noiquypc").toggleClass("darkmode-noiquy");$(".noiquycontent").toggleClass("darkmode-content");$(".sidebar .PopularPosts ul li img").toggleClass("darkmode-ppimg");$(".pcgroup img").toggleClass("darkmode-pcgroup");$(".fb-page").toggleClass("darkmode-fb");$("#banbe li").toggleClass("darkmode-banbe")})}});function checkDarkMode(){var a=localStorage.getItem("statusDarkMode");if(a==undefined){localStorage.setItem("statusDarkMode",1)}if(a==1){localStorage.removeItem("statusDarkMode");$("body").toggleClass("darkmode-body");$(".header-wrapper2").toggleClass("darkmode-topmenu");$(".mainmenu").toggleClass("darkmode-mainmenu");$("a:link").toggleClass("darkmode-link");$("div.tab").toggleClass("darkmode-tab");$(".post").toggleClass("darkmode-post");$(".sidebar h2").toggleClass("darkmode-sidebartitle");$("#sidebar2 .widget-content").toggleClass("darkmode-sidebar");$(".snippets").toggleClass("darkmode-snippets");$(".post-body").toggleClass("darkmode-postbody");$("span.bigtext").toggleClass("darkmode-bigtext");$("h2.post-title").toggleClass("darkmode-h2");$("a.dangkiblog").toggleClass("darkmode-dangki");$(".sidebar h3").toggleClass("darkmode-sidebartitle1");$("#comments").toggleClass("darkmode-comment");$("#comments h5").toggleClass("darkmode-commenth5");$("#related_img .news-text").toggleClass("darkmode-relatext");$("#comment-editor").toggleClass("darkmode-editor");$("#search_live input").toggleClass("darkmode-search");$(".noiquypc").toggleClass("darkmode-noiquy");$(".noiquycontent").toggleClass("darkmode-content");$(".sidebar .PopularPosts ul li img").toggleClass("darkmode-ppimg");$(".pcgroup img").toggleClass("darkmode-pcgroup");$(".fb-page").toggleClass("darkmode-fb");$("#banbe li").toggleClass("darkmode-banbe")}}; //]]> </script>
Bước 4: Thêm nút Tắt/Mở Dark Mode vào sau
<body>
<a href='javascript:checkDarkMode()' id='darkmode' title='Mở/Tắt Darkmode'><button class='ripplelink' id='pmicon'/></a>
Bước 5: Lưu Template lại.
Lưu ý:
  • Đối với những bạn mua và dùng Twitter Template v3 của mình thì rất đơn giản, bạn chỉ cần xóa hết toàn bộ code cũ (tính cả code Nightmode auto kích hoạt từ 21h đến 3h sáng hôm sau) và thay bằng các code mới phía trên để tránh trường hợp bị lỗi nhé.
  • Đối với những bạn dùng Template khác thì bắt buộc phải thay lại toàn bộ Class và Id sao cho phù hợp với blog của mình nhé (sẽ mất công hơn). Để hiểu code cũng như muốn thêm hiệu ứng cho phần tử khác bạn hãy tham khảo bài viết nút Dark Mode v1 trước đó nhé.
Chúc các bạn thành công và hãy thường xuyên ghé thăm blog ủng hộ mình nha :)
Many thanks to: Ngô Văn Tuấn

33 nhận xét

  1. Vừa add bài v1 giờ lại phải vào control sửa :))

    Trả lờiXóa
  2. bonus là out blog rồi vào vẫn là DarkMode hoặc NightMode nhá :v

    Trả lờiXóa
    Trả lời
    1. A có ghi ngay ở đầu bài rồi đó e :D

      Xóa
  3. cái này thì nó tiện cho ai những thích xem chế độ sáng tối :*

    Trả lờiXóa
    Trả lời
    1. A thấy nó thích hợp với những blog truyện e ạ, vì tối mà đọc bật cái này lên cho đỡ hại mắt :)

      Xóa
  4. Trả lời
    1. Chất vãi mà cái icon kia :v để a phải đổi lại icon mới đc, ra kiểu kia k đúng :))

      Xóa
  5. Để ý mới thấy, vờ lờ bạn tôi :))

    Trả lờiXóa
  6. Góp ý nè : Cái thumbnail border-radius vào nhìn sẽ đẹp hơn đấy

    Trả lờiXóa
    Trả lời
    1. T có cho mà cho 2px thôi nên khó nhìn đó :v

      Xóa
    2. Lên 6px chắc đẹp đó

      Xóa
  7. - Lâu ngày mới vào thăm blog :( mà nhìn blog anh như kiểu 1 mạng xã hội luôn vậy

    Trả lờiXóa
    Trả lời
    1. Thì nó là mạng xã hội còn gì nữa e :))

      Xóa
  8. Hay, ông Siin giỏi vậy luôn hả anh

    Trả lờiXóa
  9. Cái ảnh bìa site bác trên mobile nó chỉ nhìn thấy mỗi cái logo :v

    Trả lờiXóa
    Trả lời
    1. E biết rồi bác. Niệm cả NAD inbox qua fb rồi nhưng e chưa có time sửa.

      Xóa
  10. thủ thuật này dùng để làm gì thế bạn ?

    Trả lờiXóa
  11. thủ thuật này dùng để làm gì thế bạn ?

    Trả lờiXóa
    Trả lời
    1. Ở nút v1 mình có ghi rồi mà. Buổi tối nhìn blog toàn màu trắng sáng thì dễ mỏi mắt, thay vì dùng phần mềm ngoài thì xài nút này nó để nó biến blog thành phông đen nhìn cho dịu ấy.

      Xóa