Make A Custom Webkit Scrollbar For Your Website or Blog.

By Pravin Purohit   Posted at  03:43   Blogger No comments


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

    About the Author

    Pravin Purohit is authour at hackmadeeasy. he is a web developer . he loves to develope new things . he is master at creating android apps and is a famouse internet marketer too. his new blog its http://TechTreat.in .
    View all posts by: Pravin Purohit

    0 comments:

    Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
    Note:
    1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
    2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
    3. Please "Do Not Add Links" to the body of your comment as they will not be published.
    4. Only "English" comments shall be approved.
    5. If you have a problem check first the comments, maybe you will find the solution there.

    Back to top ↑
    Connect with Us

      Popular Posts

      Follow our updates

      Total Pageviews

    Contact us

    Name

    Email *

    Message *

    Like us

    Recent Comments

    © 2011-2013 Hack Made Easy. All rights reserved.