How To Replace Default Blogger Scrollbar With Custom WebKit Scrollbar

Scrollbar appears at the right side of any page and it helps the user to scroll up and down the page. We already know 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.

How To Replace Default Blogger Scrollbar With Custom WebKit Scrollbar
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 dashboard. Go to ‘Template’ and edit the template in HTML form.
How To Replace Default Blogger Scrollbar With Custom WebKit Scrollbar
Step 2 : Now click anywhere inside the code box and using the keys Control+F, open search box.
How To Replace Default Blogger Scrollbar With Custom WebKit Scrollbar
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.

Add a Comment

Your email address will not be published. Required fields are marked *