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

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 blogspot blogger, Thanh tien trinh doc blogspot


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
Latest
Bài mới hơn

post written by:

Mọi bài viết / thông tin trên website này được đăng tải, biên tập và kiểm duyệt bời BQT (Ban quản trị). Vui lòng gửi ý kiến của bạn tại mục "Liên hệ" trên website. Trân trọng./.

0 Comments: