JQuery Sidebar Plugin for bloggers

      This is small and simple sidebar plugin made with HTML,CSS and JQuery.which can be used for many purposes like for 'Follow me' link, 'contact us' page, or anything you want.It positions itself at Left/Right side of the page, this can be configured easily with config option "position". You can modify its look and feel by making change in style/style.css file
Implimentation
  • 1) Include javascript and stylesheet
  • <script src="js/jquery.js"></script>
    <script src="js/jquery.sidebar.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
  • 2) Activate Plugin
  •   $(function() {
    	$("body").sidebar({
    		text	: "Follow Me", // can be anything
    		size	: "30px", // can be anything in pixels
    		length  : "200px", // can be anything in pixels
    		margin	: "130px", // can be anything in pixels
    		position: "left", // left / bottom / right / top
    		fadding : "0.5", // 0.1 to 1.0 
    		openURL : "www.twitter.com/amitspatil"
    	});
      });	
    				
  • 3) More Configuration Options
  • OptionDescription
    textThis text will be shown on sidebar in Vertical style.
    sizeThis is a dynamic configuration option its behavious is dependant on position propery.
    Ex : If position is set to left/right then size option becomes width of Sidebar. and if its set to bottom/top then it becomes height of sidebar.
    lengthThis is again a dynamic configuration option its behavious is dependant on position propery.
    Ex : If position is set to left/right then length option becomes height of Sidebar. and if its set to bottom/top then it becomes width of sidebar.
    position Position of sidebar
    • left - Position sidebar to the Left of screen
    • right - Position sidebar to the Right of screen
    • top - Position sidebar to the Top of screen
    • bottom - Position sidebar to the Bottom of screen
    faddingInitial fading of sidebar (ranges from 0.1 to 1.0)
    openURLSet url which will get opened when user click on sidebar
    imgThis option is in development and will publish soon