Wednesday, 1 January 2014

Customize Scroll bar (Scrollbar) with JscrollPane in Blogger

So you want to customize your Blogger blog Scrollbar by using Jquery. Jquery offers lots of customization options and you can use it design your Blogger blog scrollbar. Just follow the simple steps shown below to customize your blogs' scroll bar.

I have already shared a way to customize the scroll bar (scrollbar) in Blogger with the help of CSS. But the problem with CSS is that it will only change the Scroll bar (scrollbar) style in webkit supported browsers. And currently only Google Chrome and Safari supports web-kit customization. In this post I will show you how to use Jscrollpane in Blogger to customize scrollbar of Blogger blog. It is very easy to use Jscrollpane in Blogger. Just follow some of the easy steps given below.

Customize Scroll bar (Scrollbar) with JscrollPane in Blogger

JScrollPane is a Jquery Script that allows changing of browsers' Scroll bar style. You can see full information about this here. We are using Jquery to change default scroll bar of web browser and giving it a new and therefore it will work on all types of web browser. You can also use CSS to customize this Scrollbar that will work in all types of browser. To customize the Scrollbar just take a look at the code for <style> tag and change the color and other customization options to edit the Scrollbar style of your blog. If you have lots of Scripts in your blogs' template than it may take a little time to load depending on Internet speed. Anyway this Jquery scrollbar will offer more customization option than the web-kit one. See the steps given below to know how to implement this in your Blogger blog.
  • First thing first, you will need to sign in to your Blogger Account if you haven't signed in yet.
  • Now after signing in click on the blog title from Blogger home on which you want to add Custom Jquery Scroll bar.
  • Navigate to Dashboard > Template. In the template page click on Edit HTML which is written just below the live preview of your Blogger blog.
  • Now search for the tag given below in quotes.
  • Now go to this link and copy all the texts/codes written on that link and than paste that code just before/above closing head tag (</head>).
  • Now search for the code given below.
  • Now add the code given below just below/after the opening body tag (<body>).
<div class='scroll-pane' id='blog-container'>
  • Now search for the following code.
  • Now add the code given below just above the closing body tag (</body>).
  • Save your Template. Great! You just added a custom Jquery Scroll bar in your Blogger blog. Isn't it easy to use?
  1. By deafault the background color of the scrollbar is transparent. To change it to your own color than search for ".jspTrack" without quotes mark in the code provided in the above link.
  2. To change the color of the bar than look for ".jspDrag" in the given code and change the background color with the hex color.
  3. You can also change the scrolling speed in your blog. To change the speed of scrolling than search for "mouseWheelSpeed:30" and change 30 to your required value.
  4. You can also make navigational arrows display in top and bottom of the Scrollbar. Just search for "showArrows: false" and change false to true.
  5. By default the scrollbar will appear in your Blogger blog everytime. To make it visible only when scrolling or when the mouse is hovered on div than add the code given below just above the "</head>" tag in your Blogger template.
'showArrows': false
$('.jspDrag').stop(true, true).fadeIn('slow');
$('.jspDrag').stop(true, true).fadeOut('slow');

Note: I haven't attached Jquery plugin in the code. So, if you haven't added any Jquery plugin in your Blogger blog than it may not work. To make it work you will need to latest Jquery plugin. If the above code doesn't make any change than insert Jquery in your Blogs' Template. It's easy to add Jquery in blog template. Just search for the "<head>" tag without quotes in your Template and add the code given below in quotes just after head tag.
<script src='' type='text/javascript'></script>
Well! That's the JscrollPane Scrollbar for blogger blog. The code may appear very large but it is necessary to add this in your Template to make the Jquery Scrollbar to work in Blogger. You can link the Script by hosting the Script file in another location but it slow down your page loading time. By directly inserting it in Template will ensure 100% loading of the Custom Jquery Scroll bar in your Blogger blog. If you would like to Customize Scrollbar with CSS than follow the steps explained here.
That's All! If you need any help than feel free to ask me or drop a comment below.

1 comment: