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>
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. Conclusion: You are all done and now when you will visit your website and scroll on any page you will see scroll bar at the top of your page. I think this post may be very much helpful for you if you are looking for this scroll bar. If you want more articles about blogger than keep visiting this blog. Thank you and Good Luck.
Hello! My name is Muhammad Muzammil & i am the owner at softwebtuts and author at raufgraphics. Sharing knowledge is my passion designing and programming is my hobby!
No comments