» » » » » » » Add jCarousel Plugin to Your Blogger

image



Mohammad Mustafa Ahmedzai once again shares a great tutorial, which is adding the jCarousel plugin to your Blogger blog. This is a jQuery plugin used for displaying an animated list of items or images in horizontal and vertical order, which you can scroll through. It can also be modified with all possible jQuery functions, and you can add it anywhere on your blog.
Here are the steps on how you can install this plugin in your Blogger.
  1. Go to Blogger Dashboard > Layout
  2. Go to Add a Gadget
  3. Select HTML/Javascript
  4. Copy and paste the code below:
<script src='http://code.jquery.com/jquery-latest.js'></script> 
 <script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script> 
 <script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script> 
 <style>
.jcarousel-skin-tango .jcarousel-container { 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 background: #F0F6F9; 

 }
.jcarousel-skin-tango .jcarousel-direction-rtl { 
 direction: rtl; 
 }
.jcarousel-skin-tango .jcarousel-container-horizontal { 
 width:425px; 
 padding: 20px 40px; 
 }
.jcarousel-skin-tango .jcarousel-container-vertical { 
 width: 75px; 
 height: 245px; 
 padding: 40px 20px; 
 }
.jcarousel-skin-tango .jcarousel-clip { 
 overflow: hidden; 
 }
.jcarousel-skin-tango .jcarousel-clip-horizontal { 
 width:  425px; 
 height: 75px; 
 }
.jcarousel-skin-tango .jcarousel-clip-vertical { 
 width:  75px; 
 height: 245px; 
 }
.jcarousel-skin-tango .jcarousel-item { 
 width: 75px; 
 height: 75px; 
 }
.jcarousel-skin-tango .jcarousel-item-horizontal { 
 margin-left: 0; 
 margin-right: 10px; 
 }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { 
 margin-left: 10px; 
 margin-right: 0; 
 }
.jcarousel-skin-tango .jcarousel-item-vertical { 
 margin-bottom: 10px; 
 }
.jcarousel-skin-tango .jcarousel-item-placeholder { 
 background: #fff; 
 color: #000; 
 }
/** 
 *  Horizontal Buttons 
 */ 
 .jcarousel-skin-tango .jcarousel-next-horizontal { 
 position: absolute; 
 top: 43px; 
 right: 5px; 
 width: 32px; 
 height: 32px; 
 cursor: pointer; 
 background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0; 
 }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { 
 left: 5px; 
 right: auto; 
 background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png); 
 }
.jcarousel-skin-tango .jcarousel-next-horizontal:hover, 
 .jcarousel-skin-tango .jcarousel-next-horizontal:focus { 
 background-position: -32px 0; 
 }
.jcarousel-skin-tango .jcarousel-next-horizontal:active { 
 background-position: -64px 0; 
 }
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, 
 .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, 
 .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, 
 .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { 
 cursor: default; 
 background-position: -96px 0; 
 }
.jcarousel-skin-tango .jcarousel-prev-horizontal { 
 position: absolute; 
 top: 43px; 
 left: 5px; 
 width: 32px; 
 height: 32px; 
 cursor: pointer; 
 background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0; 
 }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { 
 left: auto; 
 right: 5px; 
 background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png); 
 }
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
 .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { 
 background-position: -32px 0; 
 }
.jcarousel-skin-tango .jcarousel-prev-horizontal:active { 
 background-position: -64px 0; 
 }
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { 
 cursor: default; 
 background-position: -96px 0; 
 }
/** 
 *  Vertical Buttons 
 */ 
 .jcarousel-skin-tango .jcarousel-next-vertical { 
 position: absolute; 
 bottom: 5px; 
 left: 43px; 
 width: 32px; 
 height: 32px; 
 cursor: pointer; 
 background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0; 
 }
.jcarousel-skin-tango .jcarousel-next-vertical:hover, 
 .jcarousel-skin-tango .jcarousel-next-vertical:focus { 
 background-position: 0 -32px; 
 }
.jcarousel-skin-tango .jcarousel-next-vertical:active { 
 background-position: 0 -64px; 
 }
.jcarousel-skin-tango .jcarousel-next-disabled-vertical, 
 .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, 
 .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus, 
 .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { 
 cursor: default; 
 background-position: 0 -96px; 
 }
.jcarousel-skin-tango .jcarousel-prev-vertical { 
 position: absolute; 
 top: 5px; 
 left: 43px; 
 width: 32px; 
 height: 32px; 
 cursor: pointer; 
 background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0; 
 }
.jcarousel-skin-tango .jcarousel-prev-vertical:hover, 
 .jcarousel-skin-tango .jcarousel-prev-vertical:focus { 
 background-position: 0 -32px; 
 }
.jcarousel-skin-tango .jcarousel-prev-vertical:active { 
 background-position: 0 -64px; 
 }
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus, 
 .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { 
 cursor: default; 
 background-position: 0 -96px; 
 }
</style>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
 </ul>
Modify this by:
  1. Replace IMAGE LINK with image url of your preference
  2. Replace Description a 3-word description of the image
  3. Replace # with that Page URL for each image
  4. Change widget width by changing width:425px;
  5. Change image clips with by changing width:425px;
You can add another image by repeating this code:
<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
23:06
Unknown
, , , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top