Membuat Slide JQUERY di blogspot/web

Selamat malam sahabat anen, hehe,, sekarang disini udah malem soalnya,. kali ini anen share cara membuat slide jQuery, yang ini memang agak unik sob, mungkin sobat anen belum pernah tau... kalo yang pernah ya sudah.. hehehhe... lanjut aja yaa... jika sobat anen pengen lihat demonya silahkan klik demo..
ok lanjut,.

1. masuk ke akun blogger sobat
2. silahkan cari kode </head>
3. tempatkan kode berikut ini diatas sebelum kode </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/AVvXsEgc8isu9AOMPsJkiXVCO_vQAGSU3Ck1ZYn9lBl-srmDQU63rikAQQo9rZUMcFFiOIjz2UUIxMKAf4RacJADQgXoKXAmYv-Pm_ZGj4au2mnTsYJE60sSTeJoAuagd3XIusAZMvtfvbOgqK24/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/AVvXsEgc8isu9AOMPsJkiXVCO_vQAGSU3Ck1ZYn9lBl-srmDQU63rikAQQo9rZUMcFFiOIjz2UUIxMKAf4RacJADQgXoKXAmYv-Pm_ZGj4au2mnTsYJE60sSTeJoAuagd3XIusAZMvtfvbOgqK24/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>

jika sudah silahkan save..
selanjutnya sobat bisa ke elemen laman.. add html lalu paste kode berikut..

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghF0FSM3XM6f0Qvu6g_HfKVB75nuhyTOS7tIOGha1D3BioSFWnhBiyJ-sURWN4CoqbwqeuHMhLzPaZbUQU2Fy8gq_l-SuhA1j0dwmsoqHGatOkVfS6ti-qXyDz2Afb8eQ0L4sU0ekRKZI3/s1600/slide1.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlzoIQXkgjK518WzKU_aj08DrDvJT-z8sheTBgLNxzt48JICR103JJcINfMPk713At1iHmmkdBIVzvjPqtk6eAkEQ-iVVCceg5pf_a4ohD7LPGDMagnL-IUwr8SXHVubH_XDL_mwdgSJ6H/s1600/slide2.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRheUNOaOqNFZHcJ1kDKBhyphenhyphenE0j4z9RCEL8GmX0CPMQfDkPnO1zYzHKMPE6BMchxFvzJCkk1Gd8IgRHZCve9AtC3VO9_dQqsXNytLOH-XjAq0yxTdQKeH2d1aKUbTPwTe3LPiZxmR9EAoCx/s1600/slide3.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSRqZKVLIt-IVC7hbDAILmZia6PsAWunzVvuBEE85X_pB6-fpYu3MIdGB1OsXfymLUNrvmFPaRdAXyBmd97OJ9Cy-I0KCxcrLdAnT_KITEWLMRRvciy7ejTxqJAEi6XJv1OmvKXwknURkf/s1600/slide4.jpg'/></a></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLF_v8Th0vt-qcKCxWUa0phFbjKP8mn_aqREjfdMKMEBJhsHrUxVItUEZRSne_p0rviURhk88hZoqaNfd5f7D91CFYnDd3-TkLBat-JQn5RSk4UGcQ8bIu16sPAFC7pR4iyv-SUVe9xhj5/s1600/slide5.jpg'/></a></li>
</ul>
</div>

 naah jika sobat sudah selesai, silahkan edit link yang berwarna merah tersebut,...
 jika ada keganjalan silahkan komen dibawah ini..
semoga bermanfaat

semua ada di anen copas