Cara Menampilkan Smart jquery Slider ke Blogger / Website

membahas tentang bagaimana cara nya menampilkan smart jquery sider ke blogger, sebenarnya gadget ini saya dapatkan dari bloggertipandtrick.net tapi akan saya bahas kembali di sini mudah-mudahan bermanfaat.

Untuk cara pemasangan nya bisa anda ikuti langkah-langkah di bawah ini:

~Perhatian gunakan gambar 307px width dan 254px height  untuk slider ini.~

* Login ke blogger dashboard--> Design - -> Edit HTML.

    * Cari tag </head>

    * lalu copy/paste kode di bawah ini sebelum tag </head>

<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/AVvXsEjfUW-eEKdOLkIBgPf1entqaFSPWRiFYGf0Ix1kxXkYCNI8iZq74_NRP8ynA2Gaaoq6Dw2vxZ0AjdLGrZItJwI1VYRgTLw2jZQ20UFPx6C6MfJANgZEwlfd2XXp5ppNzzTYPYKuXgu7L4-1/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/AVvXsEjfUW-eEKdOLkIBgPf1entqaFSPWRiFYGf0Ix1kxXkYCNI8iZq74_NRP8ynA2Gaaoq6Dw2vxZ0AjdLGrZItJwI1VYRgTLw2jZQ20UFPx6C6MfJANgZEwlfd2XXp5ppNzzTYPYKuXgu7L4-1/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>

* lalu seve template kamu

    * Pergi ke  Design --> Page Elements.

    * Klik di  'Add a Gadget'.

    * Pilih  'HTML/Javascript' dan copy/paste kode di bawah ini

<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>

• laulu save

http://www.tipsbloging.tk/2010/09/cara-menampilkan-smart-jquery-slider-ke.html