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