Hello friends today in this article I am going to tell you how to add horizontal scroll bar without jquery at the top of your blogger blog. We will use pure JavaScript to make this horizontal scroll bar at the the position of scroll bars.
Scroll bar is an indicator that tells how much page you have read and how much space is left below. by default you are having scroll bar indicator at the right side of your webpage you can change the position of scroll bars.
Like others, this scroll bar will also indicate how much page you have read and how much page is left but the position of the scroll bar will be at the top of your webpage.
So if you want to add this kind of scroll bars in your blogger blog follow the steps provided below.
Steps to add horizontal scroll bar in blogger:
- Go To Blogger Dashboard
- Then, Go to Theme / Template Section
- Click Edit HTML
- Now search for </head>
- Now copy the code provided below and paste it above </head> which we have founded in step 4.
- Now search for <body and copy the code provided below and paste it just below <body...> tag.
<div class="progress" id="progress"></div>
To search anything in Blogger Template Code Press Ctrl+F and write term to search and press enter key.
<style>
.progress{background:orangered;position:fixed;top:0;bottom:auto;left:0;width:0%;height:5px;z-index:1000}
</style>
<script>
//<![CDATA[
let prog=document.getElementById("progress"),body=document.body,html=document.documentElement,height=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight);const setProgress=()=>{let e=((document.documentElement.scrollTop||body.scrollTop)+html.clientHeight)/height*100+"%";console.log("scroll",html.clientHeight,body.scrollTop),prog.style.width=e};window.addEventListener("scroll",setProgress),setProgress();
//]]>
</script>