How to Create Custom Webkit Scrollbar in Blogger Blog

Socialize It →

Tweet

29

Advertisements

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.

/* --- MyBloggerLab CUSTOM WEBKIT SCROLLBAR 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, #336699 10%, #336699 51%);
}
::-webkit-scrollbar-track {
}

• Then Replace #336699 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. We will soon release their tutorial too so stay tuned with MBL 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).