How to Create Custom Webkit Scrollbar in Blogger

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.

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.

/* --- Aukursoft CUSTOM WEBKIT SCROLLBAR IN BLOGGER --- */
::-webkit-scrollbar{height:14px;width:14px;background:#d4e3f1;border-left:1px solid white}::-webkit-scrollbar-thumb{background:#93c6f6;border:1px solid #55a4ee}::-webkit-scrollbar-thumb:hover{border:1px solid white}::-webkit-scrollbar-thumb:active{background:#4c9be5;border:1px solid #80bcf4}

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 Aukursoft