How to Customize Blogger Scrollbar with CSS

Hello and Welcome to GetWebInfo.Com. Here on this post you can be able to find out Latest article About Scroll Bar in Blogger. In this article i will help you to improve the appearance of the scroll bar, for the moment only in Webkit Browsers, Such as Opera, Chrome, Safari, UC Browser etc.



If you wish to customize blogger scrollbar to give your blog an attractive look, this list will let you do that with simple CSS. In fact, you are also going to have some blogger scrollbar styles to implement in your blog within few clicks. You may have already seen that many web icons like Google and Facebook are using their own scrollbar to their websites. Actually a unique look is important to improve user experience of your blog. Implementing one of the following stylish blogger scrollbar designs will give an additional improvement of your blogs overall beauty. As a matter of fact if you are not a web designer, you can simply grab any of the following blogger scrollbar styles.



How to Customize Blogger Scrollbar with CSS?

It is very easy to customize the default browser scrollbar. Actually ost of the third party blogger template developer does not implement a custom scrollbar in their template. So you have to do it by yourself. Simply follow the following instructions step by step.

Step 01: First of all LogIn to your blogger bloge.

Step 02: Go to the Theme> Edit HTML and fin out the ending " ]]></b:skin> " code.



Step 03: Grab your desired blogger scrollbar style code from the list given below and paste it right above the ]]></b:skin> as show above.



Step 04: Finally Click on Save Theme button and you can all done!!

Now just click on your blogger home page link and see the result and also make sure that it will work properly or not.


Here is the List of ScrollBar Styles



Style 1

body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}


Style 2

body::-webkit-scrollbar {
  width: 5px;
}
body::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}


Style 3

body::-webkit-scrollbar {
  width: 10px;
}
body::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}


Style 4

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}


Style 5

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
body::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
  -webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}



Style 6

body::-webkit-scrollbar {
  width: 12px;
}
body::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
body::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}


After put one of these codes in to your blogger blog press the Apply button to save the changes you that you want.

I Hope this Article is really helpful for you. If you like this article so please share it on Social Media with your Friends. Thanks for Reading.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.