How To Add Colorful Webkit Scrollbar In Blogspot blogs

What is meant By Webkit?

Webkit here Refers To a rendering engine of a Web Browser to Write / Draw The Webpages in HTML/CSS Languages. Google Chrome and Apple's Safari Are the two most popular Web Browsers Powered by Webkit Among Many Others in the List.

What is a Webkit Scrollbar ?

WebKit Scrollbar means this Custom Scrollbar Works only in Webkit Powered browsers. This Customization Will not Work in Mozilla Firefox or Internet Explorer. This scrollbar can be horizontal or vertical based on the Screen Width and Height. Scrollbar appears at the right side of the screen and that allows users to scroll up, down, left and right the page through their mouse. It is Not necessary to Change the look of the Scrollbar.

Why To Use Webkit Scrollbar ?

The Important reason to use Webkit Scrollbar is this will make the Site Look More Professional and Beautiful as We Can Match our Site Theme Color with The Scrollbar Color. and the CSS Code To add this is very light  weight does not effect on the site loading speed. So Why a person say to this.

Let Start! How To Add  Webkit Scrollbar  in our Blog:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4: After Clicking on Edit HTML Search for 

]]></b:skin>

/* TrendingWidgets.com Scrollbar Starts */  
 ::-webkit-scrollbar { background: red; /*Default if the gradient not works */  background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */  background: linear-gradient(red, yellow, green);   width: 12px;  border-radius: 5px;   -webkit-box-shadow: 0 0 6px rgba(20, 450, 0, 0.5) inset; }  

::-webkit-scrollbar-thumb{  background: lightblue; /* For browsers that do not support gradients */  background: -webkit-linear-gradient(red, yellow, blue); /* For Safari 5.1 to 6.0 */  background: linear-gradient(red, yellow, blue); /* Standard syntax */  width: 12px;  border-radius: 5px;  -webkit-box-shadow: 0 0 6px rgba(20, 450, 0, 0.5) inset;}

/* Scrollbar Ends */

STEP 5:  Copy This Above Code Before ]]></b:skin>.

Customization:

• The Yellow Highlighted Text is for Background Color of the Scrollbar and Scrollbar Slider. So Change the Color of your own Choice. and Play with it till you get your best choice.
• The Green Highlighted Text is Responsible For Width of Scrollbar and Scrollbar Slider. So If you want to increase or decrease it. its your choice. Have Fun.

STEP 6:  All Done Save the template and Check it your site.

That's It Thanks For Following our Tutorial ''Beautiful Custom Webkit Scrollbar widget for Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This.