Tạo Thanh Tiến Trình Đọc Cho Blogger Blogspot

Tạo Thanh Tiến Trình Khi Đọc Bài Viết Trong Blogspot: Hướng dẫn các bạn cách tạo Thanh tiến trình đọc bài viết trên blogspot blogger vô cùng đẹp và chuyên nghiệp. 

Thanh Tiến Trình Đọc Cho Blogger Blogspot là cái gì?

Nếu các bạn để ý, khi xem bất kỳ bài viết nào trên www.namphongnet.xyz, các bạn sẽ thấy một thanh tiến trình chạy ở phía trên cùng của website, dù là xem bằng máy tính hay điện thoại. 

>> Xem DEMO

Tạo Thanh Tiến Trình Đọc Cho Blogger Blogspot

Và đây là các bước để tạo thanh tiến trình đọc cho blogspot blogger. Nhớ đừng làm sai bước nào nhé! 

Bước 1. Các bạn đăng nhập Blogger >> Mẫu >> Chỉnh Sữa HTML

Bước 2. Sau đó các bạn chép code sau vào trước thẻ đóng </style> hoặc ]]></b:skin>

/* 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)}

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

<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>

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

Nâng cao: Tìm mả màu #29d rồi thay bằng mã màu của bạn là được. 

>> Xem và lấy mã màu tại: Bảng mã màu chuẩn

Tham khảo: Anhnhim Blog