Customization of Scrollbar for blogger | Blogger Tricks

Hello hope you all are fine and good in health. Basically i start a series of Blogger Tricks  for newbies who don't have much skills of programming. I try to teach them from basic to advance in blogging to make them able to design their own custom designs for their blogger templates. So today in this series of Blogger Tricks i teach the Customization of Scrollbar for blogger. Get started:-

Open up your blogger dashboard

Fisrt of all open your blogger dashboard. After logging in to your dashboard goto Template >> Customization. In customization tab click on  Advance option. At their you will see a space for writing. This is the place where we can add CSS styles to our blogger templates. Today we work here for the Customization of Scrollbar for blogger.

Adding The CSS code for Customization of Scrollbar for blogger

After the above step now all we have to do is to paste the below code in it.

/* ######## ©pakmax.net ######################### */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#fff}
::-webkit-scrollbar-thumb{background:rgba(139,233,38,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(139,233,38,0.4)}

Editing in the CSS code

After adding the above provided code now i tell you how you can make changes in to make your own custom style for your scrollbar.

Changing the dimensions of ScrollBar

To change the width and Height of the scrollbar for blogger you have to edit the first line of your code which will be this one:

::-webkit-scrollbar{width:8px;height:8px}

here you see witdh and height with the given pixels just change the width and height of it according to your needs.

Changing Style of Scroll bar for blogger

To change the appearance of your scroll bar you to edit this piece of code:

::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#fff}
::-webkit-scrollbar-thumb{background:rgba(139,233,38,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(139,233,38,0.4)}

Just read the code carefully and use you mind little bit and then you will be able to edit this piece of code as you want.
Also see:

•  How can you improve image quality in blogger|Blogger Tricks