Oct 19, 2016

7 Best Customized Blogger Scrollbar CSS Styles - Here's How To?

data:blog.title
7 Best Customized Blogger Scrollbar CSS Styles - Here's How To? - Have you ever thought about How some people have customized scrollbar in their Blogs and Sites just like me (Check live example on my Blog)? Isn't it looking stylish and attractive than normal (Default) browser scrollbar? Do you also want to customize blogger scrollbar and make your blog more eye-catchy, elegant, and professional? If you're wondering how you can customize it, then today I'm here with 7 Examples by using which you can also customize Blog Scrollbars using CSS. So if you're also interested in customizing your Blogger blog scrollbar, then read and follow below every step very carefully.

Custom CSS Scrollbars, Customize Blogger Scrollbar

Customization of Blogger Scrollbar

Every browser scrollbar's default color is gray which is customizable through CSS. You can easily customize scrollbar by changing its width, height, track color, thumb color, thumb hover color, and color of thumb when it is active (Someone clicks on it.). To do so, you've to use CSS coding inside your blogger template style sheet. Okay, now I'm going to list 7 stylish examples of customized blogger scrollbar but before learn how you can add CSS in blogger to Customize Scrollbar.

Recommended - Stylish Blogger Contact Form - Add To Specific Page

How To Customize Scrollbar in Blogger Blog?


  1. Login To Blogger Account >> Select Your Blog.
  2. Now Look On Left Side of Blogger Dashboard and find Template and click on it.
  3. Now Click on Edit HTML button.
  4. Press anywhere inside code area and Using CTRL+F OR CMD+F search for ]]></b:skin> tag and just after of this tag paste below Customized Scrollbar CSS Codes of your choice and then click on Save Template button.

7 Customized Examples of Blogger Scrollbar Using CSS

Here I've listed 7 Best Examples of the customizable blogger scrollbar, and now It's upon you which you want to use. I've also given highlighted text in #6th and #7th style to give you an idea to make changes in the scrollbar.  So if you want to make it as per your need, then you can also make it as per your want. To change colors, you can use our color code generator tool. :)

Style #1 - Customized Blogger Scrollbar

Customize Scrollbar in Blogger, Blogger Custom Scrollbar

<style type="text/css">
 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 border-radius: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar
{
 width: 12px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 border-radius: 10px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #000000;
}
</style>

Style #2 - Customized Blogger Scrollbar


How To ADD Colorful Scrollbar in Blogger, Blogger Custom Scrollbar

<style type="text/css">
 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #000000;
}
::-webkit-scrollbar
{
 width: 10px;
 background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
 background-color: #FF0000;
}
</style>

Style #3 - Customized Blogger Scrollbar


Gradient Color Scrollbar for Blogger, Customize Scrollbar BlogSpot

<style type="text/css">
 ::-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
{
 border-radius: 10px;
background:#c9d5ea;
background:linear-gradient(135deg,#000000 0,#FF0000 50%,#FFFF00 50%,#000000 100%);
}
</style>

Style #4 - Customized Blogger Scrollbar (Materialized Look 1)


Materialized Scrollbar in Blogger, Materialized Blogger Scrollbar

<style type="text/css">
::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
::-webkit-scrollbar{
width:12px;
background-color:#FFF
}
::-webkit-scrollbar-thumb{
background-color:#00ACF5;
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)
}
::-webkit-scrollbar-thumb:hover{
background:#008BC5;
}
::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)
}
</style>

Style #5 - Customized Blogger Scrollbar (Materialized Look 2)


Blogger Custom Scrollbar, Customized Blogger Scrollbar

<style type="text/css">
:-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)
}
</style>

Style #6 - Customized Blogger Scrollbar


Custom Scrollbar for Blogger, CSS Scrollbar for Websites and Blogs

<style type="text/css">
::-webkit-scrollbar
{
 width: 10px; /*------Change width of scrollbar------*/
 background-color: #F5F5F5;
}
 ::-webkit-scrollbar-track
{
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;  /*------Change background color of scrollbar track ------*/
}
::-webkit-scrollbar-thumb
{
 background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%,
                    color-stop(.5, rgba(255, 255, 255, .2)),
        color-stop(.5, transparent), to(transparent));  /*------ Scrollbar Thumb color ------*/
}
::-webkit-scrollbar-thumb:hover{
 background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%,
        color-stop(.5, transparent), to(transparent)); /*------Scrollbar Thumb Hover color ------*/
}
</style>

Style #7 - Customized Blogger Scrollbar


Customized Scrollbar for BlogSpot, Blogger Custom Scrollbar

<style type="text/css">
::-webkit-scrollbar {
width:12px; /*------Change width of scrollbar------*/
height:8px; /*------Change height of scrollbar------*/
}
::-webkit-scrollbar-track {
background:#111;
background:linear-gradient(135deg,#111 0,#444 50%,#444 50%,#111 100%);  /*------Change background color of scrollbar track ------*/
-webkit-box-shadow:inset 1px 1px 2px #E0E0E0;
border:1px solid #D8D8D8;
}
::-webkit-scrollbar-thumb {
background:#c9d5ea;background:linear-gradient(135deg,#d3416f 0,#6217ed 50%,#6217ed 50%,#d3416f 100%); /*------ Scrollbar Thumb color ------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(155,155,155,0.4);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow:inset 1px 1px 10px rgba(0,0,0,0.4);
background:#c9d5ea;background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%); /*------Scrollbar Thumb Hover color ------*/
}
::-webkit-scrollbar-thumb:active {
background:#c9d5ea;
background:linear-gradient(135deg,#6f9ded 0,#d3416f 50%,#d3416f 50%,#6f9ded 100%); /*------Scrollbar Thumb Active color ------*/
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.4);
}
</style>
These little things matters to attract visitors but I'll recommend you to don't waste your time in adding too many widgets on your blog because People want quality content (Read - Secret Tips To Write Like Professionals.) from you. They come to your blog to read content and If they find useful then will come again for 100% surety. So learn Some SEO TIPS-TRICKS to get massive traffic from search engines.

You Might Also Like - 
- 10+ Useful Blogger Widget for Blogger Blogs.
- How To Improve Google Search Ranking To Get Higher Rank on Google?
- How To Get Google to Index New Blog Posi in 1 Minute?

Conclusion:

So above guide is about "How To Customize Blogger Scrollbar Style Using CSS?" I've tried my best to make this tutorial as easy as possible but if any case You're facing any of problem, then let me know. I'll be happy to assist you.

Don't forget to share this Template Customization Trick with your friends and also subscribe us to get latest SEO Tricks, Online Earning Tricks, Blogger Widgets, and Blogger Tricks direct into your mailbox for free. :)

Thank You!
Stay Blessed and Stay Happy!
Search Tags: Customize Blogger Scrollbar, How To Customize Scrollbar Style in Blogger, CSS Blogger Scrollbar Styles, Using CSS Customize Blogger Scrollbar, CSS Scrollbar Styles, Customized CSS Scrollbars, CSS Scrollbar Customizable Styles. How To Customize Blogger Scrollbar.

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.