Tạo Thanh Tiến Trình Khi Đọc Bài Viết Trong Blogspot

Thấy có nhiều bạn hỏi cách tạo thanh màu xanh xanh khi đọc bài viết ở Anh Nhím Blog, nên nay mình sẻ hướng dẫn các bạn tạo nó cho blog của bạn

Mục lục:

Mục Đích

Thực Hiện

Nâng Cao

Lời Kết

Mục Đích

Chả biết, biết tạo cho đẹp blog
Có thể giúp đọc giả viết vị trí bái viết để xem bài viết mình đọc còn nhiều không
......

Thực Hiện

1. Các bạn đăng nhập Blogger >> Mẫu >> Chỉnh Sữa HTML
2. Sau đó các bạn chép code sau vào trước thẻ đóng </style> hoặc ]]></b:skin>

CSS/* Reading progress bar */
#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:0;height:3px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}

3. Sau đó chèn code sau vào trước thẻ đóng </body>

JS<div id='nprogress'><div class='bar' role='bar'><div class='peg'></div></div></div>
<script>//<![CDATA[
!function(t){t.fn.viewportOffset=function(){var o=t(this).offset();return{top:o.top+t(window).scrollTop()}},t.fn.readingbar=function(){_=t(this);var o=_.outerHeight(),r=1.65*_.offset().top,n=0;t(document).on("scroll",function(){o=_.outerHeight(),n=(_.viewportOffset().top-r)/o*100,t("#nprogress .bar").css("width",n+"%"),t("#nprogress").css("opacity",n>100?"0":"1")})}}(jQuery);

          jQuery(document).ready(function($) {$('.post-body').readingbar();});

          loadJS('https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js', function () {
            jQuery(document).ready(function ($) {
              var d = $("#Blog1");
              d.fitVids(), d.find("img").addClass("img-responsive center-block");
            });
            loadJS('https://cdnjs.cloudflare.com/ajax/libs/photobox/1.9.9/photobox/jquery.photobox.min.js', function () {
              $('.post-body').photobox('a[imageanchor]', {
                time: 0
              });
            });
          });

          loadJS('https://npmcdn.com/social-likes-next@1.1.0/dist/social-likes.min.js');

          function loadSdk(){setTimeout(function(){loadJS("https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6&appId=458084867627529")},2000)}"complete"===document.readyState?loadSdk():window.addEventListener("DOMContentLoaded",loadSdk,!1);
        //]]></script>

4. Lưu mẫu xem kết quả.

Nâng Cao

Thay đổi màu thanh tiến trình

Tìm mả màu #29d rồi thay bằng mả màu của bạn

Vào đây lấy mã màu

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Thanh Tiến Trình Khi Đọc Bài Viết Trong Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.