0:00
Hello everyone, welcome to Key2 blogging and in this video I will show you how you can add a
0:04
custom CSS scrollbar in your blogger website. So this is by default the browser scrollbar looks
0:12
like. So you can easily change the look and feel of the scrollbar using a CSS code. So let me just
0:19
show you. So go to your blogger dashboard and here click on theme and before changing anything
0:26
make sure to take a backup of your theme so that you can easily restore it back to the original if
0:32
you don't like the method or if you have any error in the process. So let me just click on edit HTML
0:41
and here you have to search for the bskin tag. So let me just find this code and here it is
0:49
the bskin tag. Now you have to copy a CSS code from this. So just copy the CSS code
1:00
and paste it above the bskin tag and save your theme. Now let's refresh this blog post and as you can see the scrolling bar is changed. So in this way
1:15
you can easily change the look and feel of this scrolling bar. So let me just add a different style
1:22
So let me just copy this and here remember that if you want to add this code just above the
1:29
closing body tag then you have to put a style tag just above and below it. So let me just copy this
1:36
code and here let me first remove the first code that we have applied above the bskin tag
1:46
So this is the code. Now go to the closing body tag and here paste this code. Now save your theme
1:59
Now click on refresh. As you can see the scrolling bar is changed. So I have provided
2:09
five different methods of adding scrolling bar in your blogger website. So let me just select this
2:18
again and go to the theme editor and search for the closing body tag and let me just replace it
2:27
with the new one and click on save. And now refresh this page and as you can see the scrolling
2:37
bar is changed. So you can also change the width of the scrolling bar. So here search for the code
2:46
and search for the width. So here the width is 10px. So let me just change it to 18px
2:55
Now click on save. Now refresh this page and as you can see the width of the scrolling bar is
3:03
changed and you can also customize the color and the border radius from this code. So here you can
3:11
change the background color of the container or background color of the scroll bar. So if you want
3:18
to add this scroll bar to a specific post and doesn't want to add it to the whole post then you
3:25
can go to the blog post and here click on html view and let me just add a different scroll bar
3:34
So just copy this code and you can paste it in the blog post like this and click on update
3:44
Now let me just open this blog post. As you can see the scrolling bar is changed in this post
3:51
and in this way you can add the scrolling bar css code in a individual post or for the whole website
3:59
And if you have any doubt regarding this then you can ask me in the comment section
4:04
and all the required code will be given in the description. I hope you like this video and if
4:10
you like this then hit the like button and subscribe to my channel for more upcoming videos
4:15
like this. I will see you in the next video. Thank you
