Slider Gambar Dengan Smart Jquery

Tips kali ini kita akan membuat slider buat gambar dengan bantuan fitur Smart jquery. untuk penjelasannya sendiri pasti kalian sudah tahu dan mungkin emang artikel kaya gini sudah lumrah di dunia blogger. namun bagi yang belum tahu, Bisa melihat langsung DEMO PREVIEWnya DISINI...
Langsung saja, kalian login dulu ke blogger kalian, lalu ikuti tahap berikutnya dibawah ini :
1. Masuk ke Rancangan / tata letak
2. Pilih EDIT HTML
3. Cari kode </head>
4. Sisipkan kode berikut diatas 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/AVvXsEjeahi7MbfqEi4WJRfEg0ZqIFhuNQQdTfoO07Lp-gtBANW6aYreyDFmUczHFPo0rUmJF2Q-aJ9I5l4FjLD8Bi4uikiPxhfTwlVrvL5tffl9ReVi_TZSgfE3V3B5edjBslZy1M2GXuu3MzcL/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/AVvXsEjeahi7MbfqEi4WJRfEg0ZqIFhuNQQdTfoO07Lp-gtBANW6aYreyDFmUczHFPo0rUmJF2Q-aJ9I5l4FjLD8Bi4uikiPxhfTwlVrvL5tffl9ReVi_TZSgfE3V3B5edjBslZy1M2GXuu3MzcL/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>

5. SIMPAN dulu template kalian.
6. Sekarang masuk Ke ELEMEN
7. ADD Gadget lalu Pilih HTML/Java Script
8. Copy kode berikut :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='LINK TUJUAN KALIAN'><img src='URL GAMBAR KALIAN'/></a></li>
<li><a href='LINK TUJUAN KALIAN'><img src='URL GAMBAR KALIAN'/></a></li>
<li><a href='LINK TUJUAN KALIAN'><img src='URL GAMBAR KALIAN'/></a></li>
<li><a href='LINK TUJUAN KALIAN'><img src='URL GAMBAR KALIAN'/></a></li>
<li><a href='LINK TUJUAN KALIAN'><img src='URL GAMBAR KALIAN'/></a></li>
</ul>
</div>

kETERANGA :
== ganti kata LINK TUJUAN KALIAN dengan link yang kalian kehendaki
== ganti URL GAMBAR KALIAN dengan gambar yang kalian kehendaki

9. SIMPAN TEMPLATE
10. Selesai....

Sampai disini dulu ya... baca Juga Artikel yang membahas cara memasang slide show post image. Semoga bermanfaat, komentarnya ya...