Customize the scroll bar (scrollbar) with JScrollPane alphause

next Helplogger Home Blog DesignWidgets SEO Menus Po ... Customize the scroll bar (scrollbar) with JScrollPane 2 comments JScrollPaneis 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. Demo You can see an example in this test blogwhere the scroll bar has a different shape and color. How to change the scrollbar on Blogger 1.Go toTemplate>Edit HTMLand beforepaste this code: 2.Then locate this tag: Or this line: Under any of these two add this:

3.Finally search for theand 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? Like 2 Random Posts How To Change Avatar Size In Blogger Comments05/05/2012 - 10 Comments Add Random Posts Widget to Blogger11/03/2012 - 50 Comments Adding a Meta Description to Blogger19/10/2013 - 6 Comments Related Posts: Understanding the Page Elements of ... Orbit - jQuery Image Slider Plugin ... jQuery Sliding Panel with Expanding... How to add a thumbnail image/photo ... Using JQuery + EasyDrag to Move Ele... 2 comments: mohamed kinane 10/30/2013 Like it Reply Anonymous 11/05/2013 I tried it but now my blogpage has 2 scroll bars the old one (outside) and a new one (inside) how can i remove the old one? Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,785 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... next