How To Add CSS Animation Webpage Scroll Bar Effects

0
How To Add CSS Animation Webpage Scroll Bar Effects in my blogger template
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
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
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
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
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
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 !




learn trick to install webkit animated Webpage Scrolling Animation Effects with CSS3 in blogger template,embed scroll scroll bar box inside the website window.change all scroll button into stylish animated effect.
Hello Guys,We are Again Back with the another awesome trick for bloggers.In this tutorial we are...
SUMMARY

learn trick to install webkit animated Webpage Scrolling Animation Effects with CSS3 in blogger template,embed scroll scroll bar box inside the website window.change all scroll button into stylish animated effect.

You Might Also Like:

We hope this article helped you to learn How To Add CSS Animation Webpage Scroll Bar Effects . If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add CSS Animation Webpage Scroll Bar Effects " So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand