The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or videos inwards horizontal or vertical order. Items tin live on scrolled dorsum as well as forth with animation. You tin role this equally an epitome scroller or equally a featured postal service slider. This plugin tin live on controlled externally with both JavaScript, AJAX as well as php. It was originally created past times Jan Sorgalla. If you want to a greater extent than versions of this plugin you lot tin cheque his website.
Installing this plugin is real easy, all you lot take away to create is follow the uncomplicated instructions as well as re-create glue the given code below.
Installation.
1. Go to your blogger.com trouble organisation human relationship > conduct Layout
2. Click on Add Gadget
3. Select HTML/Javascript
4. Copy as well as glue 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:450px; 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: 450px; 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="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
</ul>
Make these changes
- Replace the word "IMAGE LINK" with the URL of your picture
- Replace Description with your description of the photograph as well as then that search engine spider tin easily crawl into your epitome as well as ameliorate SEO.
- Replace "#" with the link of your choice.
- To alter the width of the plugin, search as well as edit width:450px; as well as supervene upon it with your desired width that will perfectly check your design.
To add together an extra epitome but repeat this code:
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="The jCarousel is a jQuerry plugin used for controlling a listing of items such equally images or v Scroll Image amongst jCarousel Widget for Blogger" /></a></li>
5. Save the template as well as you lot are done.
