Scrollbar appears at the right side of any page and it helps the user to scroll up and down the page. We already knows about the scroll bar in a default blogger template. To have a good experience for the user, the scroll bar should be smooth. Although, the default scroll bar is good enough and working without any complaint but, adding a newly customized scroll bar makes your blog more attractive.
WebKit scrollbar provides you with a very beautiful and smooth working scroll bar. The scroll bar is user friendly and makes your blog more professional. In this post, I will show you how you can also implement WebKit scrollbar in your blog. Just follow these simple steps given below.
Replace Default Blogger Scrollbar with Custom WebKit Scrollbar
Step 1 : Open your blogger's dashbaord. Go to 'Template' and edit the template in HTML form.
Step 2 : Now click anywhere inside the code box and using the keys Control+F, open search box.
Step 3 : Search for ]]></b:skin>
Step 4 : Now paste the following code just above it.
/* For the "inset" look only */
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Step 5 : Save the template and that's it. You have successfully changed your default blogger scrollbar.
I hope this small tutorial helped you to add WebKit scrollbar in your blog. If you faced any problem then feel free to ask below in the comments.
