How To Add Smart Jquery Featured Slider to Blogger/Websites

This is a another tutorial about, how to add great featured jquery content slider to your blogger blog or other website.Read the instruction given below to add this featured content slider to your blog with in few minutes.Remember to use 307px width and 254px height images for this slider.I recommend to DOWNLOAD java script files and host it yourself.Also you can see the DEMO of this slider HERE.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>
<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

<script type="text/javascript">
jQuery(document).ready(function() {
          jQuery('#mycarousel').jcarousel({
          wrap:"both",
          scroll:2,
          animation:"slow"
  });
          function mycarousel_initCallback(carousel) {
          jQuery('#featured-next-button').bind('click', function() {
                  carousel.next();
                  return false;
          });

          jQuery('#featured-prev-button').bind('click', function() {
                  carousel.prev();
                  return false;
          });
          jQuery('.button-nav span').bind('click', function() {
                  carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                  return false;
          });
  };
          jQuery('#feature-carousel').jcarousel({
          wrap:"both",
          scroll:1,
          auto:10,
          initCallback: mycarousel_initCallback,
          buttonNextHTML: null,
          buttonPrevHTML: null
  });

});
</script>

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal {width:  941px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}
.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}
.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

.jcarousel-skin-tango .jcarousel-next-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oXpnEtScz6insUnIF9vbWSXZKhXdWKQzb1iQKe0osRVvPFGaYVTrNDnbUDgXgfa558bh4A3FxQ4TI4jSRZTz-iykV5hbnA-aEFN7owWj1D_Mj2I9HsUhCfxCWX5zc3LSx8jF4Y6UomhG/s1600/image-slider-button.png) no-repeat scroll -46px 0;
cursor:pointer;
height:254px;
right:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5oXpnEtScz6insUnIF9vbWSXZKhXdWKQzb1iQKe0osRVvPFGaYVTrNDnbUDgXgfa558bh4A3FxQ4TI4jSRZTz-iykV5hbnA-aEFN7owWj1D_Mj2I9HsUhCfxCWX5zc3LSx8jF4Y6UomhG/s1600/image-slider-button.png) no-repeat scroll 0 0;
cursor:pointer;
height:254px;
left:20px;
position:absolute;
top:0;
width:46px;
}

.jcarousel-container {position: relative;}
.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}
.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}
.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}
.jcarousel-next {z-index: 3;display: none;}
.jcarousel-prev {z-index: 3;display: none;}

#news-slider{background-color:#FFFFFF;padding:20px 0;}
#news-slider img{border:none;height:254px;width:307px;}
</style>

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>
<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>
</ul>
</div>

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTkuONQ5hub42D_mPaxr3Wcq1wD8jAgtZv_cCu57DRW43LNdhxjCCFaA8nUnaU4ARl9be6SYZrkufO8tARmCkC0KYOiNI77r_IBH7HhahGFuATYH_vvLuVncZEpgt04O57egQw7P3joFm/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hfLtv3J_zR6is4lPZurfyz8C08wv0imzZst5IunyAMvhpvw9nw8aijCt3fDZpR9-I2fNFAK8aMA1vBcnotZLqvbU-NwtPXQ2MdK_QHI0yT_k_P8OWnbejhzJo5tdmxfqT3vIe5-0g1UH/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyiow6MCOccSg1yWu5D2GeWOLJOtApIwaB3JfHWpGVEHnXrMpMA9ybg5Aiw2QelU9uN4WdwuYodNOBejn4rdjX4hFgrwHrXIDWMpuuD_IuO9rBqDBJRqCgZy3s05MNc6h-4rx3qFb7nwp/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHlcS9Xre6QAbFd9DQ_s5YBur-bcSlKmQYq8-vYT9KBVAPcXTtS3MrLu9dDyaLKH8DSxcdK_v76QPfdSbqYf5yYeSdSyCvs_TebyyxqxoURXrh87IcL7U_s2xR7YUre9zN5i7XMJn1Sm1/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9otdv-nKP8b_Y2HtZSUriAqVU48FkF3OrUHGWUFOMU9JYITPdzcbBgrEMWGeMtQr5DAd4X4OkxDnJ1_Ov70rpTAfNluz-RtzSfI3alHMpLmVOmDbhSvDSCKHOE6LKuer6y72bPAGPeBp/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Share this on Reddit
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Share this on Mixx
• Subscribe
• Buzz up!
• Share this on Linkedin
• Submit this to DesignFloat
• Share this on Technorati
• Submit this to Script & Style
• Post this to MySpace
• Share this on Blinklist
• Share this on FriendFeed
• Seed this on Newsvine

Be a Fan