How to Create Custom Webkit Scrollbar in Blogger 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
