Cách Thêm Nút Dark Mode Cho Blogspot (F5 không mất hiệu ứng)

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách tạo nút Dark Mode Bật/Tắt tùy ý F5 không bị tắt off blog vào lại vẫn còn, trừ khi nào bạn tắt nó mới tắt.

Cách Thực Hành

Bước 1: Đăng nhập Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: chèn đoạn code CSS bên dưới trước thẻ ]]></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: Chèn đoạn code Javascript trước thẻ </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 Bật/Tắt sau thẻ <body>

<a href='javascript:checkDarkMode()' id='darkmode' title='Mở/Tắt Darkmode'><button class='ripplelink' id='pmicon'/></a>

Lời Kết

Chỉ cần vài bước thao tác đơn giản là bạn có ngay một nút Bật/Tắt Dark Mode cho blog rồi tuyệt vời đúng không nào.
Chúc các bạn thành công !

Code: Phú Cường Blogger

Bài đăng Mới hơn Bài đăng Cũ hơn