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

N

31

Chia sẻ

• Nhận liên kết

Nguyễn Phú Cường

Cuộc sống đôi lúc không như chúng ta mong muốn nhưng đừng buồn, đừng suy nghĩ nhiều quá mà hãy tiếp tục đứng lên và chiến đấu tiếp vì tương lai của chính mình nhé!