petrussiahaan.com - How to Make a Gradient Color Progress Scrollbar on Blogger - In an attractive Blog Design, every little detail can make a difference. One element that is often overlooked is the scrollbar. While it's rarely the main focus, updating the appearance of the scrollbars on your blog can improve the overall user experience.
In this article, we will explain How to Make a Gradient Color Progress Scrollbar in your Blogger, so as to give it an aesthetic touch which are interesting.
How to Make a Gradient Color Progress Scrollbar on Blogger
1. First when opening Blog Dashboard <> Themes >> Edit HTML
2. Then copy the CSS code below and enter the code just above the code ]]></b:skin> or </style>
#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, #5E64EE, #5EEE66);
}3. Add this JavaScript code right above the code </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>4. Then add the code below just below <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>5. For the last one, please, friend Save Theme
- If you want to change the color change the color code #5E64EE and #5EEE66 then you can use tools Color Picker to choose a color.
- If using one color remove the code background:linear-gradient(45deg, #5E64EE, #5EEE66); ganti jadi background:#2967E3.
- For those who use sticky menu navigation, to SET the location of progress scrollbar can adjust the height of the code top: 0; become top: 45px;
- For those who want to change the position where the scrollbar progress is below just change the code top: 0; menjadi bottom: 0;
How to Make a Gradient Color Progress Scrollbar on Blogger can provide an attractive aesthetic touch and enhance the user experience. By following the steps above, you can easily create a progress scrollbar with a gradient color that suits your style and blog theme. Don't be afraid to experiment with different color combinations and find the look that works best for your blog.
