Thêm nút Dark Mode cho blogspot

Share:
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é.

24 nhận xét:

  1. Trả lời
    1. Cái này trước ông xài rồi còn gì :)) K rõ code giống k thôi chứ thanks gì ông haha

      Xóa
    2. Nó comment đểu đó :v

      Xóa
  2. Trả lời
    1. Hên là e xài temp a nhá, nên là k cần nghiên cứu mà cứ nhét thẳng vào blog là đc :v

      Xóa
    2. haha, onl đt lag qua nó ra 2 cmt :((

      Xóa
  3. Nút này đc nè, chứ chế độ tự động thành ban đêm nhìn u uất :v

    Trả lờiXóa
    Trả lời
    1. Ừ, tiếc là nó k lưu kiểu khi F5 k mất thôi chứ k thì bá rồi. Làm cái này cho ae có nhiều lựa chọn chứ t cũng bỏ cái cũ vì k chỉnh theo ý đc.

      Xóa
  4. Nghe đồn có cái js lưu cookie gì đó khi F5 sẽ không bị mất ý. Giống mấy trang bán hàng mà lưu đồ vào giỏ hàng á, F5 không mất sản phẩm. Tui nghĩ có liên quan nhau. Nếu rảnh thì nghiên cứu xem áp dụng được thì áp dụng.

    Trả lờiXóa
    Trả lời
    1. À ừ. Ông nói t mới nhớ là t còn chưa nghiên cứu mấy temp bán hàng :( Vậy là chỉ cần js lưu cookie đó là rỏ hàng lưu đc số lượng sản phẩm nhỉ. À thế còn cách click vào hàng mà nó nhảy số trên rỏ hàng thì nó xài js gì thế ông?

      Xóa
    2. Chả biết nữa t đoán là xài js get thôi. Đặt giỏ hàng là a, sản phẩm là b. Khi click vào b sẽ dùng js get nó vào a rồi dùng js lưu cookie lại k cho mất khi tải lại trang. Đoán là vậy.

      Xóa
    3. Ok ông. Để t nghiên cứu xem.

      Xóa
  5. Cái avatar ở đầu trang sao giống cái gì đó rất quen thuộc :D

    Trả lờiXóa
    Trả lời
    1. Đúng rồi đó e :v A ăn cắp cả màu vàng quen thuộc kia nữa mà :v

      Xóa
  6. Cái Banner nhìn hấp dẫn nhĩ :v

    Trả lờiXóa
    Trả lời
    1. Ừ, Star Cường làm hộ sáng nay ấy mà, t xin psd căn chỉnh cho nhỏ thành phần lại thôi :))

      Xóa

Bình luận