How to add Horizontal Scroll bar at top of page in blogger

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>

To search anything in Blogger Template Code Press Ctrl+F and write term to search and press enter key.

Now copy the code provided below and paste it above </head> which we have founded in step 4.

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

Now search for <body and copy the code provided below and paste it just below <body...> tag.

<div class="progress" id="progress"></div>

Preview:

Customizations:

In the court provided above you have to replace the highlighted text with your own text for example in the CSS code you have to change the colour of this scroll bar with the colours you like.source:softwebtuts.com

A4F

How to add Horizontal Scroll bar at top of page in blogger