Customize the scroll bar (scrollbar) with JScrollPane Tutorial For Blogger

JScrollPane is a jQuery script that allows you to change the blog' scroll bar, ie the browser scrollbar.
Although we can use CSS to change it, the problem is that is not standardized, because with CSS we can make it work only in Chrome and Safari; and in the case of Internet Explorer it also has its own code but obviously it only works in that browser (I don't know which versions). So what we will do then is to give a new look to the scrollbar but by using jQuery, so the change will be visible in all browsers.


You can see an example in this test blog where the scroll bar has a different shape and color.

How To Change the scrollbar on Blogger

1). Goto Template > Edit HTML and before
paste this Code:
Copy This Code Click  Here
2). Then Locate This tag

Or This Line:

Under any of these two add this:

3). Finally search for the and above it paste this:

Save the changes and that's all. In green you will see where you can change the scrollbar colors and its different areas, or add other styles, such as shadows, rounded corners, etc..

If you want the top and bottom limits to not appear (as in the example) then remove what is in red.

Remember that the script uses jQuery, so if you already have it, then don't put the script again (the first line of code). If you are using Scriptaculous or Mootools, then you should make some slight changes in order to make it work.

Maybe the code might appear long but better add the scripts directly in the template, so the scripts will always be available and load faster. Regardless of all of this the end result is quite aesthetic, don't you think?
Next Post »

Thanks You For FeddBack! :) EmoticonEmoticon