Make A Custom Webkit Scrollbar For Your Website or Blog.

Do you want to enhance the Scroll bar of your website? Scroll bar appears at the right side of the screen and, it allows users to scroll down the page whenever they drag there mouse up or down the page. To provide a user-friendly experience to your visitors, it is essential to have a Smooth Scroll bar. However, there is no doubt that Custom Scroll bar does the job quite handsomely, but it is not perfect. Few days ago, our reader informed us about the colorful Webkit Scrollbars that he has seen on different websites. Furthermore, he also requested us to develop a similar one. Therefore, in this article we will learn How to Create Customize Webkit Scrollbar in Blogger BlogSpot Blog?

What is the Definition of WEBKIT Scrollbar?

Mostly of the people are still thinking what does the word “WEBKIT Scrollbar” means, it is a vertical or horizontal bar which usually appears at the right side of the screen and that allows users to scroll down the page through their mouse. If anyone is still unable to understand how it works then, don’t forget to check the following demonstration which would clear all the misconception that is wobbling into your brains. Consider the following screenshots.

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Why to Use Customized Scrollbar?

There is no lethal reason why a person could say a no to Customized Scrollbar because it adds a new elegant life to his website. Consider that a person has a highly professional website but since, the Scrollbar is from old-school, so it is quite clear that, it will destroy the complete outlook of a website. To learn more about the difference between an ordinary or and a customized scrollbar consider the following screenshot.

How to Add Webkit Scrollbar in Blogger Platform?

To be honest, there is no complexity in this tutorial because all we need to do is to insert a CSS to our theme, and it would do the job quite effortlessly.  To install Webkit Scrollbar in your blogger template consider the following instructions.

• Go To Blogger.com >> Templates >>EDIT HTML >> Proceed.
• Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.

/* --- HackMadeEasy.Blogspot.com CUSTOM WEBKIT gradient SCROLLBAR With Rounded Corners IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #32A4D6 10%, #32A4D6 51%);
-moz-border-radius:200px;
-webkit-border-radius:200px;
border-radius:200px;}
::-webkit-scrollbar-track {
}

For websites paste above code in your style sheet or add below code above ur

/* --- HackMadeEasy.Blogspot.com CUSTOM WEBKIT gradient SCROLLBAR With Rounded Corners IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#fff;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #32A4D6 10%, #32A4D6 51%);
-moz-border-radius:200px;
-webkit-border-radius:200px;
border-radius:200px;}
::-webkit-scrollbar-track {
}

Then Replace #32A4D6 with the color that you want to see in the Scrollbar.

All Done: After doing all the customization just press the Save button. Now Visit your site and we are sure it wouldn’t let you down. By using the same technique, we can customize many elements of a website.

It is Always Recommended to Backup Your Template Before Making Any Changes