5 Best Animated CSS Scroll Bar For Blogger

How to setup a Animated scroll bar into your blogger blog - As far as I know blogging is a passion and every new and old blogger's always want to make their blog dashing by adding some cool effect into their blog. Okay, now if you are an inspired blogger and you also want to make some changes in your blogger template, then don't worry I'm here with a new animated widget. This widget is really cool and you can easily set up it in your blog with the help of some CSS code. So today with the help of this article we are going to learn how we can easily set up 5 types of Animated page scroll bar into our blogger blog.

How To Install Animated CSS Scroll Bar?

First go to your blogger dashboard - Visit

Now before editing your template don't forget to make a backup of it.

Now go to "Template" section and then click on "Edit html" button to install this scroll bar.

And then, find the below tag by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

After that copy any one Css code from below and paste it just before ]]></b:skin>.

Blue Animated CSS Scroll Bar

::-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)
}

Green Animated CSS Scroll Bar

::-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 Animated CSS Scroll Bar

::-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)
}

Orange Shaded Animated CSS Scroll Bar

::-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)
}

Black Thin Animated CSS Scroll Bar

::-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;
}

Now click on the orange save template button to apply the changes and then reload your blog and see the magic.

That's it! I hope you love these css scrollbars! Stay tuned for more cool widgets! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES