How To Add Smart Jquery Featured Slider to Blogger/Websites

Posted by Lasantha Bandara on July 28th, 2010 File Under : html, java script, jquery, widget16 Comments

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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/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='http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMLk05DMI/AAAAAAAAAF0/oH_Qd-mcS_I/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='http://1.bp.blogspot.com/_pZaV-NlP_3s/TFAML-hfhII/AAAAAAAAAF8/5AsriuSPkxo/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='http://4.bp.blogspot.com/_pZaV-NlP_3s/TFAMMcW4kII/AAAAAAAAAGE/Eg9gpRvlMAw/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMMm7N3xI/AAAAAAAAAGM/Bm4RX6kvhhs/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMNIVEm-I/AAAAAAAAAGU/Hp5RUvKX78U/s1600/slide5.jpg'/></a></li>
</ul>
</div>

You are done.

File Under : html, java script, jquery, widget

16 Responses to “How To Add Smart Jquery Featured Slider to Blogger/Websites”

  1. cHugy - gOgOg says:

    It's cool bOz....and good tutorial.
    Thanks for sharing...nice can be visite this blog.

  2. EFEITO PHOTOSHOP says:

    Thank you so much for this post!

  3. Beben says:

    nice border 🙂

  4. Tinh says:

    Excellent tip, thanks for sharing. Tinh

  5. Anonymous says:

    Hai bro...good tutorial..buat how to fix size slider and image going to height 50px + width50px...to make icon slider like apple application.tq

  6. Er. Yogesh Rishi says:

    this is really a nice thing...i will try it on my blog

    My Blog

  7. МФĦБММБĐ says:

    thx very much, i was searching for this featured widget.

    but could you help me on how to modify it so that the width will be 635px ?!

  8. Admin says:

    The images do not appear on the slides 🙁

  9. Gabbar1113 says:

    Images are not showing. Help.

    My Blog
    http://thisxmas-2009.blogspot.com/

  10. Gianter says:

    I have the same problem faced by Gabbar1113...

    codes works fine, but images are not showing. It just appears a breaked images' icon just like the images URL is not true!!!!!

    I upload it to Picasa, then click on link to this photo > check on image only(no link)and select original size which was 307px....

    http://thisxmas-2009.blogspot.com/

    anyone could help us....

  11. Stevie K says:

    Works great. Is there a way to make the entire background of the slider black to match my blog http://www.le-baboardriders.com/ ?

  12. Tiffani Lawton, OJTA says:

    Can this be used somewhere other than the header? Perhaps at the footer or within a page/post? Is there a way to modify the size of the images?

  13. oyuncak says:

    süper olmus tebrikler kulandım 🙂

  14. raylighters says:

    just what am lookin for, nice slider, thnxz

  15. cobadibaca says:

    very nice jquery slider guys.. thanks so much for share

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.