How to Create Custom Webkit Scrollbar in Blogger Blog

• Home
• Tricks
• How to Create Custom Webkit Scrollbar in Blogger Blog

How to Create Custom Webkit Scrollbar in Blogger Blog

Posted by Unknown | 2:40 PM | Leave a Comment

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 a Scrollbar?

A Scrollbar is a GUI (graphical control element) which controls elements like text, pictures, videos and anything else available on the webpage. In other simple words, it’s a long thing bar located at the right side of your screen by which an element can be scrolled with the help of a mouse.



[quote]::-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 */ }[/quote]

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.

/* --- MyBloggerWorld 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.

Article from MyBloggerLab