How to Create Custom Scrollbar CSS for all Browsers - Rauf Graphics

Custom scrollbar CSS for all browsers

Hi there, today you will create best custom scroll bar for your website/blog. If you want to customize website scrollbar to give your blog an attractive look for readers. Actually, It play a very important role in reputation of a blog. As basic things of a responsive template are bold use of colors, smooth scrolling, impressive menu therefore people usually focus on them but it is not just enough because several other things are also responsible for a responsive design like a stylish scrollbar.
I don't thing scrollbar needs introduction everyone knows what a scrollbar is. So this post is about customizing scrollbar in blogger by CSS. I will share one most effective stylish and impressive scrollbar below.

View Demo



How to Customize Scrollbar with CSS?

🌟 First of all, login to your Blogger account.
🌟 Go to the Theme > Edit HTML and find the ending " ]]></b:skin> " Code.
🌟 Copy code below and paste it above.

CSS
<style>
::-webkit-scrollbar-thumb {   
  border-radius: 20px;
  background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}
 
::-webkit-scrollbar-track {     
  background-color: #fff;
  background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
}</style>
🌟 Finally, click on the "Save Theme" button and visit your blog. You will see the scroll bar in action.
If you need another style of scrollbar please comment below i will create another for you.
How to Create Custom Scrollbar CSS for all Browsers

How to Create Custom Scrollbar CSS for all Browsers


Custom scrollbar CSS for all browsers

Hi there, today you will create best custom scroll bar for your website/blog. If you want to customize website scrollbar to give your blog an attractive look for readers. Actually, It play a very important role in reputation of a blog. As basic things of a responsive template are bold use of colors, smooth scrolling, impressive menu therefore people usually focus on them but it is not just enough because several other things are also responsible for a responsive design like a stylish scrollbar.
I don't thing scrollbar needs introduction everyone knows what a scrollbar is. So this post is about customizing scrollbar in blogger by CSS. I will share one most effective stylish and impressive scrollbar below.

View Demo



How to Customize Scrollbar with CSS?

🌟 First of all, login to your Blogger account.
🌟 Go to the Theme > Edit HTML and find the ending " ]]></b:skin> " Code.
🌟 Copy code below and paste it above.

CSS
<style>
::-webkit-scrollbar-thumb {   
  border-radius: 20px;
  background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#da1b60));
  box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}
 
::-webkit-scrollbar-track {     
  background-color: #fff;
  background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17);
}</style>
🌟 Finally, click on the "Save Theme" button and visit your blog. You will see the scroll bar in action.
If you need another style of scrollbar please comment below i will create another for you.
Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo
close