How to Add a Custom Scrollbar in Blogger using CSS?
Do you want to give your Blogger website a professional look by adding a custom-designed scroll bar?
Here, In this article, I will show you how to replace the old scroll bar with a beautiful CSS scrollbar in Blogger.
Adding a custom scrollbar will give a website a professional look and you can change the color with your brand color.
But, before proceeding further note that Custom scrollbars are not supported in Firefox or in Edge, prior to version 79.
Note: Download Link is given below.
How To add Custom Scrollbars in Blogger?
Here, we will use the non-standard ::-webkit-scrollbar pseudo-element to modify the default browser scrollbar. This is a basic CSS code that you can use to modify the look of the scroll bar.
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}Here the 1st code target the width of the scroll bar (here 10px) and the second code handles the track of the bar and in the 3rd and 4th code, you can change the handle color and other properties.
So, you can add the code in the theme editor or inside a single post of Blogger. So, to apply the CSS scroll bar to the entire site go to the theme > edit HTML and search for ]]></b:skin> tag and add the code just above it.
You can also use the CSS code just above the </body> tag by adding a <style> tag to the CSS code.
So, to simplify the process, I have added 5 different styles of Custom scroll bars that you can use on your Blogger website.
CSS scroll Bar 1 (Gradient Style)
::-webkit-scrollbar {
width: 14px;
}
::-webkit-scrollbar-track {
background-image: linear-gradient(
100deg,
rgb(0, 0, 0) 11%,
rgb(16, 44, 50) 92%
);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
border: 2px solid rgba(255, 255, 255, 0.5);
}Here the width of the scroll bar is 14px which you can change according to your website. You can also change the border radius of the bar and the handle.
CSS scroll Bar 2 (Dark Black)
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 14px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #000000;
}Here, I have set the width of the scroll bar to 14px and add the black color in the background.
CSS scroll Bar 3 (Blue Materialized Look)
::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
::-webkit-scrollbar{
width:12px;
background-color:#FFF
}
::-webkit-scrollbar-thumb{
background-color:#00ACF5;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
}
::-webkit-scrollbar-thumb:hover{
background:#008BC5;
}
::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)
}Here the width is set to 12px and added a blue color scroll bar which is one of my favorite scroll bars in blogger. Here the box-shadow is applied to the scroll bar.
CSS scroll Bar 4 (Yellow Materialized Look)
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #F90; background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}</span></span></pre>
</div>This is just like the above scroll bar with a yellow color background. You can also use your own color codes in the above CSS code.
CSS scroll Bar 5 (SKY Blue Scrollbar)
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
::-webkit-scrollbar-thumb:hover{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, transparent), to(transparent));
}I hope this Tutorial will help you Install Custom Scrollbar Using Pure CSS.
If you have any doubt regarding the Custom scroll bar or any other doubts in Blogger you can ask me in the comment section.
You can also check more Blogger tutorials on our YouTube channel and share this article on social media. Thank you. 😍
Also check: How to add a cool Preload animation in Blogger.
