Tạo thanh cuộn Progress ScrollBar cho blogspot

Anh Trai Nắng
0
Thanh cuộn Progress ScrollBar là một thanh dọc hoặc ngang thường ở ngoài cùng bên phải hoặc dưới cùng của cửa sổ ứng dụng hoặc trang web.

Có thể một số bạn đã từng thấy blog khi cuộn xuống hoặc cuộn lên thì có chuyển động ở thanh cuộn.

Nhưng đó chưa phải là tất cả, một chức năng khác là dấu hiệu cho thấy bài viết chúng ta đang đọc đã đến cuối bài. Vì vậy, khi bạn cuộn xuống, hình ảnh động trông như đạt đến một điểm. Như vậy khách truy cập sẽ dễ dàng xem được phần cuối bài viết của chúng ta hơn.

Tạo thanh cuộn Progress ScrollBar cho blogspot
Tạo thanh cuộn Progress ScrollBar cho blogspot.

Progress ScrollBar rất dễ tạo trong blogspot. Và việc cài đặt hoặc tạo thanh cuộn tiến trình sẽ không làm blog tải nặng chút nào.

Nếu bạn quan tâm đến việc tạo hoặc cài đặt thanh cuộn tiến trình trên blog của mình, vui lòng làm theo các bước bên dưới.

Cách tạo và cài đặt Progress ScrollBar cho blogspot

Trước tiên các bạn chèn JQuery này vào trên thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Thường thì trong template hay có sẵn rồi, các bạn kiểm tra lại, nếu có rồi thì khỏi chèn nữa.

Tiếp đến, chèn đoạn code sau trên thẻ đóng </body>

<style type="text/css">
/*Progress ScrollBar*/
progress {position: fixed;left: 0;top: 0;width: 100%;height: 2px;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;background-color: transparent;color: #eefba3;z-index: 9999;}
progress::-webkit-progress-bar {background-color: transparent;z-index: 10;}
progress::-webkit-progress-value {background-color: #19B5FE;z-index: 10;}
progress::-moz-progress-bar {background-color: #eefba3;z-index: 10;}
.progress-container {width: 100%;background-color: transparent;position: fixed;top: 0;left: 0;height: 5px;display: block;z-index: 10;}
.progress-bar {background-color: #eefba3;width: 0%;display: block;height: inherit;z-index: 10;}
</style>
<script type='text/javascript'>
//<![CDATA[
//Progress Bar
$(document).ready(function() {
 var getMax = function() {
  return $(document).height() - $(window).height();
 }
 var getValue = function() {
  return $(window).scrollTop();
 }
 if ('max' in document.createElement('progress')) {
  var progressBar = $('progress');
  progressBar.attr({
   max: getMax()
  });
  $(document).on('scroll', function() {
   progressBar.attr({
    value: getValue()
   });
  });
  $(window).resize(function() {
   progressBar.attr({
    max: getMax(),
    value: getValue()
   });
  });
 } else {
  var progressBar = $('.progress-bar'),
   max = getMax(),
   value, width;
  var getWidth = function() {   
   value = getValue();
   width = (value / max) * 100;
   width = width + '%';
   return width;
  }
  var setWidth = function() {
   progressBar.css({
    width: getWidth()
   });
  }
  $(document).on('scroll', setWidth);
  $(window).on('resize', function() {
   max = getMax();
   setWidth();
  });
 }
});
//]]>
</script>

Sau cùng, chèn đoạn HTML sau vào dưới thẻ mở <body>

<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>

Lưu chủ đề và xem kết quả ở Blog mình.

(getButton) #text=(Live Demo) #icon=(link)

Progress ScrollBar Style 2 với màu chuyển sắc

Đối với phương pháp hoặc kiểu Progress ScrollBar Style 2, phương pháp cài đặt gần như giống ở trên nhưng màu sắc thu được sẽ đa dạng hơn vì màu được sử dụng sử dụng màu chuyển sắc.

Chèn đoạn code dưới đây lên thẻ đóng </body>

<script>
//<![CDATA[
var bar_bg = document.getElementById("top-scrollbar-bg"),
    body = document.body,
    html = document.documentElement;
bar_bg.style.minWidth = document.width + "px";
document.getElementsByTagName("body")[0].onresize = function() {
    // Update the gradient width
    bar_bg.style.minWidth = document.width + "px";
}
window.onscroll = function() {
    // Change the width of the progress bar
    var bar = document.getElementById("top-scrollbar"),
        dw  = document.documentElement.clientWidth,
        dh  = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight ),
        wh  = window.innerHeight,
        pos = pageYOffset || (document.documentElement.clientHeight ?
                              document.documentElement.scrollTop : document.body.scrollTop),
        bw  = ((pos / (dh - wh)) * 100);
    bar.style.width = bw + "%";
}
//]]>
</script>
<style>/* Progress Scrollbar Gradient*/
#top-scrollbar {position: fixed;top: 0;left: 0;width: 0%;height: 3px;overflow: hidden;z-index: 99999;}
#top-scrollbar-bg {width: 100%;height: 100%;position: absolute;background:linear-gradient(45deg, #26A65B, #22A7F0);}</style>

Và chèn đoạn này ở dưới thẻ mở <body>

<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>

Lưu template lại là xong.

Tùy chỉnh:

  • Hãy thay đổi màu sắc thành màu đỏ theo mong muốn của bạn. Đối với màu gradient, nếu bạn chỉ muốn sử dụng một màu thì vui lòng xóa mã background-gradient(45deg, #26A65B, #22A7F0), sau đó thay bằng màu #2967E3
  • Đối với những người sử dụng menu điều hướng Sticky, vui lòng đặt vị trí của thanh cuộn tiến trình trong mã top 0: menjadi top: 45px;
  • Thay đổi vị trí của Progress ScrollBar thành bên dưới, vui lòng thay đổi mã top: 0:menjadi 0

Đó là tất cả những gì Anh Trai Nắng Blogger có thể truyền tải trong hướng dẫn này về Cách Tạo thanh cuộn Progress ScrollBar cho blogspot. Hy vọng nó có thể được áp dụng cho blog của bạn. Cảm ơn bạn và hy vọng nó hữu ích.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

0 Nhận xét

Đăng nhận xét (0)

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu