How To Add Custom Scrollbar in Blogger Website

In this article, we will discuss scrollbars, maybe some don't know if we can customize or edit the scrollbar of a website or blog according to our wishes.

when we open a website / blog, there will definitely be a scrollbar, in general the scrollbar is on the right side of the screen, it looks default but there are some blogs that customize the scrollbar to make it look attractive and clean when viewed. (more stable if the color is combined with a template or blog theme).

How To Install Custom Scrollbar in Blogger Blog :-

The custom scrollbar method is quite simple, you just need to apply the css code below into ]]></b:skin> or </style> Tag.

::-webkit-scrollbar {
   width: 12px;
}
::-webkit-scrollbar-track {
   background: #f90;
}
::-webkit-scrollbar-thumb {
   background: blue;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
   background: black;
}

Now Save Theme Theme And See The Results.

-This webkit works for Google Chrome , Opera and Safari . To implement a custom scrollbar in Mozilla you need JavaScript.

How To Install Custom Scrollbar For Safari Browser :-

Even though -webkit alone can be applied to Safari, sometimes in some cases it still doesn't work, so you can apply the css code below.
::-ms-scrollbar {
   width: 12px;
}
::-ms-scrollbar-track {
   background: #f90;
}
::-ms-scrollbar-thumb {
   background: blue;
}
::-ms-scrollbar-button:start:decrement,
::-ms-scrollbar-button:end:increment {
   background: black;
}

The code above is only slightly different from the previous code -webkit to -ms , just in case you don't delete the previous code -webkit so it can be applied to Chrome and Opera.

Custom Scrollbar within a specific Class or ID tag

The explanation and installation above is for the default scrollbar or default from HTML, so all scrollbars on your blog will automatically change to all the same, but if you want to change the appearance of certain scrollbars, for example, you have a tutorial blog and use pre code, this method is suitable for you guys, this scrollbar is made by yourself using class identity / id / div / and others. Therefore it is necessary to apply the name of a certain class / id.

For example, let's say you create a box with a scrollbar and for example use a div with the class name hiiroscrollbar. So the CSS code needs to start with the class name .hiiroscrollbar, for example like this.

.hiiroscrollbar::-ms-scrollbar {
   width: 12px;
}
.hiiroscrollbar::-ms-scrollbar-track {
   background: #f90;
}
.hiiroscrollbar::-ms-scrollbar-thumb {
   background: blue;
}
.hiiroscrollbar::-ms-scrollbar-button:start:decrement,
.hiiroscrollbar::-ms-scrollbar-button:end:increment {
   background: black;
}

So the change will only apply to the scrollbar in the hiiroscrollbar class that we just created earlier.

As a note the code above is just an example, you can add CSS code according to your wishes such as shape, color, and size.

If Opera doesn't work, add new code with -o- prefix. Initially all browsers including Mozilla could only use CSS3 as it was started with -moz-, but for the reason that Mozilla didn't like that most site owners often changed the scrollbar style on a regular basis, this feature was removed. Then need JavaScript to change scrollbar on Mozilla.

Maybe that's all for this article, thank you.

MrHasan is a website where you can find html, css, js, seo, adsense, premium blogger templates, blogger tips and tricks, blogger widgets & many more.

Post a Comment