Elastislide – A Responsive Jquery Carousel Plugin For Blogger

Elastislide is a responsive jQuery carousel plugin created and published by codrops. Now it is available for blogger blogs. Its special feature is that it will automatically adapt its size and its behavior in order to work on any screen size.You can add this widget by the following steps.

Look at Preview of this Widget.

 Live Demo

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.

1. Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
2. 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=" Its special feature is that it will automatically adapt its size and its behavior in orde Elastislide – A Responsive jQuery Carousel Plugin For Blogger" 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>
3. Repeat the code highlighted above.
4. Now change the url of the page and image and also change the alt tag with your tag.
   
5. Save your widget, refresh your blog. Now you can see the widget.  

Any Suggestions about this widget are welcome.Feel free to share this widget and leave your comments.

Share this post