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.

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