How To Add CSS Animation Webpage Scroll Bar Effects

Hello Guys,We are Again Back with the another awesome trick for bloggers.In this tutorial we are going to explain how to add CSS animation Scroll bar in Your template. Off course all browsers have scroll bar but that is default one.If you add Some code in your blogger template,whenever your website or blog opens in any browser you can see stylish and colorful scroll button inside the window.You might have noticed on some websites that their scroll bar is in different color why is not yours ? So from now your scroll bar will also going to display in stylish way which definitely gonna suits your website or blog niche.So let's skip the tutorial and see how to install Animated CSS scroll widget gadget inside the blogger template.

How to install css animation webpage scrolling Effects in blogger template

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on -> Template -> Edit HTML.

Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.

Step 4. Copy the below any style CSS code and paste it just before the ]]></b:skin> or </style> tag.

Black Color Webpage Scrolling Animation Effect

#Style 1 - Black Color Webpage Scrolling Animation Effect:

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #000000;
}

Orange Color Webpage Scrolling Animation Effect

#Style 2 - Orange Color Webpage Scrolling Animation  Effect: 

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #F90;  background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}

Green Color Webpage Scrolling Animation Effect

#Style 3 - Green Color Webpage Scrolling Animation  Effect: 

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}

Grey Color Webpage Scrolling Animation Effect

#Style 4 - Grey Color Webpage Scrolling Animation  Effect:

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #AAA;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, .2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(0, 0, 0, .2) 50%,
             rgba(0, 0, 0, .2) 75%,
             transparent 75%,
             transparent)
}

BlueColor Webpage Scrolling Animation Effect

 #Style 5 - Blue Color Webpage Scrolling Animation  Effect:

::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
 border-radius: 10px;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #3366FF;
 border-radius: 10px;
 background-image: -webkit-linear-gradient(0deg,
                                           rgba(255, 255, 255, 0.5) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, 0.5) 50%,
             rgba(255, 255, 255, 0.5) 75%,
             transparent 75%,
             transparent)
}

Step .5 Now Save Your Template..Done !