Thêm nút Dark Mode cho blogspot

Như trước đây mình có dùng hiệu ứng Nightmode rồi, nó cũng vẫn còn tích hợp trong Twitter Template v3.0 mình đăng bán thời gian gần đây, chức năng thì cứ đến 9h tối đến 3h sáng hôm sau sẽ kích hoạt toàn template 1 màu tối giúp dịu mắt hơn khi đọc bài viết. Nhưng rồi chán, mình lại muốn dùng 1 nút Dark Mode có chức năng tắt/mở theo ý người đọc (nhưng sẽ auto tắt khi F5 nha). Theo yêu cầu từ bài đề xuất bài viết cho blog thì mình sẽ chia sẻ nút Dark Mode cho các bạn nhé.

Thêm nút Dark Mode 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 CSS cơ bản 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-link{color:#bdbdbd!important}
Bước 3: Thêm Javascript trước thẻ
</body>
<script type='text/javascript'> //<![CDATA[ // Darkmode $(document).ready(function() { $("#darkmode").click(function() { $("body").toggleClass("darkmode-body"); $("a:link").toggleClass("darkmode-link"); // Thêm hiệu ứng thì thêm theo cú pháp trên }) }); //]]> </script>
Lưu ý:
Hiện tại bên trên đối với Darkmode chỉ là đoạn CSS và Javascript đơn giản kích hoạt cho toàn bộ link trong blog và nền toàn bộ blog. Nếu bạn muốn thêm hiệu ứng cho các phần khác trong blog thì thêm CSS và Javascript, ví dụ như muốn làm cho mục bình luận màu nền tối đi thì sẽ thêm CSS và Js như sau:
- CSS:
.darkmode-comment{background:#2a2a2a}
- Javascript:
$("#comments").toggleClass("darkmode-comment");
Bước 4: Đặt code hiển thị nút Dark Mode này vào vị trí bạn thích (có thể đặt ngay sau thẻ
<body>
cho tiện)
<a href='javascript:void(0)' id='darkmode' title='Mở/Tắt Darkmode'><button class='ripplelink' id='pmicon'/></a>
Bước 5: Lưu template lại.
Đối với những bạn dùng Twitter Template v3.0 mua lại từ mình thì chỉ cần xóa hết các code có liên quan gồm CSS+HTML của button cũ và thêm lại mới như sau:
- CSS:
/* 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%)}
- Javascript:
<script type='text/javascript'> //<![CDATA[ // darkmode $(document).ready(function() { $("#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") }) }); //]]> </script>
- HTML:
<a href='javascript:void(0)' id='darkmode' title='Mở/Tắt Darkmode'><button class='ripplelink' id='pmicon'/></a>
Kết luận:
Bài viết này nếu bạn nào am hiểu về CSS và Javascript thì sẽ không khó khăn trong việc edit theo ý và thêm hiệu ứng mình muốn nhưng nếu ai chưa tìm hiểu mấy thì sẽ thấy khó hiểu. Vì thế mà nếu có bất kì chỗ nào không hiểu thì bạn có thể để lại bình luận để mình giải đáp nhé.

DMCA.com Protection Status

Blog mình đã bỏ hệ thống bình luận Blogspot và thay thế bằng bình luận Facebook từ ngày 11/07/2018 nên hơn 3k bình luận trước đó sẽ không còn hiển thị nữa. Nếu bạn không nhận được phản hồi về thắc mắc của bạn trong mỗi bài viết thì liên hệ trực tiếp với mình qua PCB Fanpage.