Implementing Smooth Div Scroll in Blogger

Smooth Div Scroll is a jQuery plugin that scrolls content horizontally. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling.




             See Demo                                                                                            Download




Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

2.Go to the Post/Page you want to add this plugin and then go to Edit HTML tab .

3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="Stylesheet" type="text/css" href="smoothDivScroll.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.ui.widget.js" type="text/javascript"></script>  
<script src="jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
		$(window).load(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", 
														autoScrollDirection: "backandforth",
														autoScrollStep: 1,
														autoScrollInterval: 15,
														startAtElementId: "startAtMe",
														visibleHotSpots: "always" });
 
		});
	</script> 
<style type="text/css"> 
	
	#makeMeScrollable
	{
		width:100%;
		height: 330px;
		position: relative;
	}
	
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
	}
	
	</style> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div id="makeMeScrollable">
		<div class="scrollingHotSpotLeft">
</div>
<div class="scrollingHotSpotRight">
</div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="field.jpg" /><img src="gnome.jpg"  /><img src="pencils.jpg"  /><img src="golf.jpg" /><img src="river.jpg"  /><img src="train.jpg"  /><img src="leaf.jpg" /><img src="dog.jpg"\ /> 
</div>
</div>
</div>

Here you might observe that we have placed all the img tags with no spaces in between them, this is because if the img tag is placed in the next line then Blogger Editor by default adds a br tag in between the line which in-turn disturbs the indenting of the images and they appear out of place, do therefore leave no space between them.




5.Now save the Post/Page.


             See Demo                                                                                            Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox