How To Add Together Css Animation Webpage Scroll Bar Effects

Hello Guys,We are Again Back amongst the roughly other awesome push clit a fast 1 on for bloggers.In this tutorial nosotros are going to explicate how to add together CSS animation Scroll bar inwards Your template. Off course of report all browsers convey scroll bar but that is default one.If y'all add together Some code inwards your blogger template,whenever your website or spider web log opens inwards whatever browser y'all tin run across fashionable together with colorful scroll clit within the window.You mightiness convey noticed on roughly websites that their scroll bar is inwards dissimilar color why is non yours ? So from right away your scroll bar volition likewise going to display inwards fashionable agency which definitely gonna suits your website or spider web log niche.So let's skip the tutorial together with run across how to install Animated CSS scroll widget gadget within the blogger template.

How to install css animation webpage scrolling Effects inwards blogger template

installation steps:

Step 1. Log inwards to your Blogger trouble concern human relationship together with 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 whatever style CSS code together with glue it simply earlier 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 ii - 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 iii - 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 iv - 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 five - 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 !