how to add shutter effect photo slider to blogger

Shutter Effect Portfolio with jQuery and Canvas a wonderful and awesome tutorial from tutorialzine.i have replicated that tutorial to add that slider to blogger.you can see a working demo on blogger here http://jquerydem0.blogspot.com/2011/03/shutter-effect.html.
how to add shutter effect photo slider to blogger
copy the below code place it in a html-gadget or in your header it works pretty well also don't forget to add the jquery latest version above your head section

<div id="cont">
<ul>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/1.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/2.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/3.jpg" width="640" /></li>
<li><img height="400" src="http://dl.dropbox.com/u/13256471/jquery.shutter/assets/img/photos/4.jpg" width="640" /></li>
</ul>
</div>

<style>
#cont{
 width:640px;
 height:400px;
 margin:0 auto;
 border:5px solid #fff;
 overflow:hidden;
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

#cont ul{
 list-style:none;
padding:0;
margin:0;
}
#page{
 width:650px;
height:400px;
}
#cont img{
padding:0;
}
.shutterAnimationHolder .film canvas{
 display: block;
    margin: 0 auto;
}

.shutterAnimationHolder .film{
 position:absolute;
 left:50%;
 top:0;
}

.shutterAnimationHolder{
 position:absolute;
 overflow:hidden;
 top:0;
 left:0;
 z-index:1000;
}
</style>
<script src='http://dl.dropbox.com/u/13256471/jquery.shutter/assets/jquery.shutter/jquery.shutter.js'>
</script> 
<script src='http://dl.dropbox.com/u/13256471/jquery.shutter/assets/js/script.js'>
</script>

note:
if you are using your own hosting then you should change one thing in script.js and jquery.shutter.js

thats nothing but change imgsrc location in both js files