Add Custom Scroll Bar with Hover and Pressing Effect

Nowadays, Visitor are also intelligent and they see your site carefully So its important that you choose or make your template professional. To make your blog template professional I come with custom scroll bar with hover and pressing effect. This is because the ordinary scroll bar (by browser) does not match your site's color. Like if your site's theme is in yellow color and the scroll bar is in grey that's why it look funky. So, I am providing you a code by which you can replace the ordinary scroll bar with an advanced scroll bar. Custom scroll bar is everywhere available but with special effects? No. In this scroll bar if you hover, the color will change and when you press the scroll bar it shows shadow on its corner. Many popular blogs like MBT use this type of scroll bar but not with advanced features. Let's start adding an advanced Scroll Bar!

Demo: Look at our scroll bar. Hover on it, press at and look changing effects.

 Adding Custom Scroll Bar on Blogger

Here are the codes and simple steps. 

• Go to Blogger Dashboard > Template > Edit HTML
• Find ]]></b:skin> by pressing Ctrl+F
• Now, Paste following code above it.

/* Webkit Scrollbar */
::-webkit-scrollbar {
    width: 8px;
::-webkit-scrollbar-track {
    background: #ffffff;
    -webkit-box-shadow: inset 1px 1px 2px #E0E0E0;
    border: 1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
    background: #febd17;
    -webkit-box-shadow: inset 1px 1px 2px rgba(155, 155, 155, 0.4);
}
::-webkit-scrollbar-thumb:hover {
    background: #EAA800;
}
::-webkit-scrollbar-thumb:active {
    background: #febd17;

    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
} 

• Now Save your Templates and see it live on your blog.

Customization

You need to match it with your template's theme color. Like our template's theme color is orange so we used orange as normal, Dark orange in hover and again orange on pressing.

• Change #febd17 with the color you want on normal.
• Change #EAA800 with the color you want on hover. [Tip: Change it with the dark color of your theme]
• Change #febd17 with the color you want on press. [Tip: Change it with the color on Normal]

Done!  Now tell a look at your blog. If you want color suggestions then leave your comment bellow with your blog address and also subscribe comments so that you will get an email when we reply uou on comments.

Disadvantages

Their are some disadvantages of this widget like this widget will not run on another browser except Chrome Browser [Latest] and Safari Browser. You blog's scroll bar will show as ordinary scroll bar when you look from Firefox or Internet Explorer or any other. May be it will available on future updates of Firefox and Internet Explorer and then this disadvantage will get fixed. 

Final Words from Author

I hope you will like this professional look of your blog. This is quite easy trick to give your blogger blog a professional look. Do you know this widget will also work on other blogging platforms like WordPress. If you caught any problem in the codes or got any other question, just type on comments. Thank you!

Share this post