Home » Blogger Tutorials, Tricks and Hacks » Add jCarousel Plugin to Your Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add jCarousel Plugin to Your Blogger

Add jCarousel Plugin to Your Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,110 views

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 LINKwidth="75" height="75"alt="Description" /></a></li>
<li><a href="#"><img src="IMAGE LINKwidth="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINKwidth="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINKwidth="75" height="75"alt="Description" /></a></li>
 <li><a href="#"><img src="IMAGE LINKwidth="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 LINKwidth="75" height="75"alt="Description" /></a></li>

 

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. very thanks super 😀

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here