How to Install Elastislide jQuery Carousel For Blogger?

Adding jQuery plugin to the template:

As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.
This Step is not Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.

Add the below line of code before </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

Adding Widget Code to blogger

These steps are to add the Elastislide Carousel Plugin to your blog.

Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
Paste this code inside it
<style>
/* Elastislide Style */
.es-carousel-wrapper{ background: #101010; padding:10px 37px; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; position:relative;}
.es-carousel{ overflow:hidden; background:#000;}
.es-carousel ul{ display:none;}
.es-carousel ul li{ height:100%; float:left; display:block;}
.es-carousel ul li a{ display:block; border-style:solid; border-color:#222;}
.es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%;}
.es-nav span{ position:absolute; top:50%; left:12px; background:transparent url(http://3.bp.blogspot.com/-C2VgY35Z-Cg/T0pFL1jGQMI/AAAAAAAAAmw/OWe5BvaFDfA/s1600/nav.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px;
cursor:pointer; opacity:0.8;}
.es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right;}
.es-nav span:hover{ opacity:1.0;}
</style>
<div class="es-carousel-wrapper" id="carousel">
<div class="es-carousel">
<ul>
<li>
<a href="URL OF THE PAGE">
<img alt="ALT TAG" src="URL OF THE IMAGE" />
</a>
</li>

</ul>
</div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.elastislide.js" type="text/javascript">
</script>
<script type="text/javascript">
$('#carousel').elastislide({
imageW : 180,
minItems : 5
});
</script>
Repeat the code highlighted above.
Now change the url of the page and image and also change the alt tag with your tag.
Save your widget, refresh your blog. Now you can see the widget.