Skip to main content

Free css scrollbar style for blogger 2017

Looking for css scrollbar style? Here are the Best and Free css scrollbar style for blogger
To make our template look professional and nice then we have to customize every every element of the template and give the same effect to every element. While working on customization of the template we may need several different resources to customize template. Everyone is not master in coding and for those who are somewhere have loose coding skills may require to get some useful resources from other places which offers free or premium resources publicly.While customizing template we may also have to customize the scrollbar too.  I think customizing scrollbar may not require much mastery of coding we can customise scrollbar with CSS.
For those who don't want to make their own scrollbar styles then don't worry because I have in this post placed 14 CSS scrollbar styles 2017 for you.

How to install on blogger

Before we start first let's take a look on how we can install these scrollbars on blogger. For this follow the steps:
First goto Blogger dashboard >> Theme >> Customize>> Advanced
At there click on the advance tab at last point. At there you should see a place where you can add css coding.
At there copy the code of your favourite scrollbar style and paste it at there and save your template.
Voila ! You successfully install your favourite scrollbar style.

Blue lined Scrollbar

Paste the below code for this scrollbar style :

::-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 CSS Scrollbar

Paste the below code for this scrollbar style :

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

Red N' Black Scrollbar

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
  transparent,
  rgba(0, 0, 0, 0.4) 50%,
  transparent,
  transparent)
}

Gray gradient Scrollbar

Paste the below code for this scrollbar style :

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
                                          rgba(0, 0, 0, 1) 0%,
  rgba(0, 0, 0, 1) 25%,
  transparent 100%,
  rgba(0, 0, 0, 1) 75%,
  transparent)
}

Orangey Scrollbar

Paste the below code for this scrollbar style :

::-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(90deg,
                                          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)
}

Balcky Scrollbar

Paste the below code for this scrollbar style :

::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: #000000; }

Balcky II scrollbar

Paste the below code for this scrollbar style :

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

Comments

Popular posts from this blog

How to Remove Powered by Blogger – Attribution Widget?

In this article, I will be demonstrating how to remove or hide attribution widget ‘Powered by Blogger’ in footer of blogger blogspot blogs.  Before going to the process,  backup your blogger template , while editing html code if anything goes wrong or template modified design doesn’t work or looks good you can restore from backed up template.  Here I have demonstrated you two methods for removing attribution widget. Some blogger templates may not support method 1 then you need to follow method 2 for successfully removing attribution widget. Method 1: Remove ‘Powered by Blogger’ by unlocking Attribution widget Step 1 : Go to your blog “Template” | click on “Edit HTML”. Step 2 : Here on drop-down “jump to widget” option and select Attribution 1 as shown below Step 3: After selecting Attribution 1 widget you will be able to see this line <b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’>  on your blogger template. Step 5: Once done click on...

How to get Google Assistant on your Windows, Mac, or Linux Machine

Google Assistant is Google’s answer to Amazon’s Alexa smart home assistant. Initially only available with limited functionality in the Google Allo application, Google Assistant later rolled out with the Google Home and Pixel smartphones to bring the full power of Google’s assistant to consumers. After a few months of waiting, smartphones running Android 6.0+ also received Google Assistant, and just a few days ago Google launched the Google Assistant SDK which allows Assistant to be run on basically any platform. Today, we will show you how to install Google Assistant onto your Windows, Mac, or Linux machine using Python. Note: at this point in time, this is purely for educational purposes. There’s no fancy GUI for you to play with, and installing Assistant requires you to use the command line. Get Google Assistant on Windows/Mac/Linux Machines Requirements: Python 3 You’ll need to have Python installed no matter whether or not you are using W...

Fix for NET Framework 3.5 not installing on Windows 10

I'm a gamer at heart, so you can imagine how annoyed I was when I saw that a Windows 10 error was preventing me from running certain titles. Many modern games require  NET Framework 3.5 in order to run, but... whenever I tried to install it on my Windows 10, I got the " DISM failed. No operation was performed ." error message. Since I'm sure I'm not the only one facing this problem, I've decided to show everyone how to fix it. For those of you who are interested, the Net Framework is a programming infrastructure that Microsoft created to help developers build and deploy products that use .NET technology. Since there are a lot of applications and services that rely on .NET (Dot Net) for their functionality, you can imagine that this kind of error can be quite irritating. Here are a few solutions that you should try: Solution One This is the one that takes the least time, but you need to have the USB stick that contains the Windows 10 installer plugged into your...