Image Auto Scroller Horizontal In Both Directions Using jQuery For Blogger.

ALSO VISIT:jQuery Horizontal Smooth Slider/Image Scroller with Next/Prev Button

Another Beautiful, clean Black Image Scroller.It scrolls your Image,Links,Text And Videos.It stops on hover.On hovering an image The Set of two Arrows appears in Right As well as Left direction.You can switch it on both directions.Just view its working and looks ! in Demo below : )

View Demo

Please Download Scripts And Upload in Your Own Server Then use Direct Links to files In Below Code.
Where To Upload These Scripts ?Click Here To Know :)

• 
  Download Scripts!

Installation :

Step 1:

Css + Javascripts


Login your BLOGGER account And click on Layout in the sub menu click then Edit HTML now Check Expand Widget Templates

Now Find ]]></b:skin> Then Replace it with Below Code

]]></b:skin>

<link href='http://bloggerplugnplay-files.bravehost.com/imageScroller.css' rel='stylesheet' type='text/css'/>

<script src='http://bloggerplugnplay-files.bravehost.com/scrollerjquery-1.3.2.min.js' type='text/javascript'/>

Step 2:

HTML

click on Layout in the sub menu click PAGE ELEMENT Click Add a GADGET select HTML/JAVA paste below code in it and Click SAVE

<div id="outerContainer">

 <div id="imageScroller">
     <div id="viewer" class="js-disabled">
         <a class="wrapper" href="http://www.apple.com" title="Apple"><img id="apple" alt="Apple" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKRw23q8rGP4CHBBpR5IyhntK0DRGx1Xg36OgfKP1xuIfjYRtLbF4tj_5L8PH0l34_MFnh0cfB26KdOJYp3RGAo63asmmcpexPMLTaVVd5c9QI0uJD1dF-CwFbMNdXVTOKeIonkUgOCoa/s200/apple.jpg" class="logo"/></a>
         <a class="wrapper" href="http://mozilla-europe.org/en/firefox" title="Firefox"><img id="firefox" alt="Firefox" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBnJUrDkwVbS-RrdjozWE4iOA9dyiL2n21j_CXHGWFz1NowjnWpK70WqwHP7Oiw0ehn2wEhRy__FpljaY7EcvCq1vCPHh_fyqKM7tIYdD1ww0lhwA5idxDDMBG0cxl-cn8NgCBtE9pmx93/s200/firefox.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jquery.com" title="jQuery"><img id="jquery" alt="jQuery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8w9VsjsHJv8DTm0_fc1eko5mbcfKfloVJDOJONg9eD02oKdEtdJmA8QD5UFwyKRprw-8O9QU67G-ydw5TPsP4-_zg5ACHxD-qd1F6PuILdcIVd_BwrwJXeB_ckiHEJFiTyKeF9Pg6tpW/s200/jquery.jpg" class="logo"/></a>
         <a class="wrapper" href="http://twitter.com" title="Twitter"><img id="twitter" alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2yGarFr3WLm0rRt1ZjYmHYjaf8O0X_l5VOmFz84tGtesWa2MI7BOjfFGnDCkHg7UZTtKALGbA6sJVx0lGoGoV2NJzlKH1KAl6fTJQRZkPngblyCEy89KgIo2eW8ZMQB2FAbSylPiVfyp/s200/twitter.jpg" class="logo"/></a>
         <a class="wrapper" href="http://jqueryui.com" title="jQuery UI"><img id="jqueryui" alt="jQuery UI" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-IZ13fNzME_AMOO8k30mOkt9-Wqr0yuqelXpXr3SfHaHaradHn-8JEBIKf0IM3MFC5rhkdwcW-V3OIMHORs9PNvxX4eU2ytcRNdNBFegsv24A3CuzHOZKCMWo_sO4TzOLuKch3A9kGvGN/s200/jqueryui.jpg" class="logo"/></a>
     </div>
 </div>

</div>

Now you will see a Scroller on your site.You can replace Images With Any Text,Videos Any thing you like it to have.As i always say...PLEASE DARE TO COMMENT ;)

Credits :Dan Wellman converted to ease for Blogger by Blogger plug n play


ALSO VISIT:jQuery Horizontal Smooth Slider/Image Scroller with Next/Prev Button