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