Kali ini tutorial untuk meletakkan smart jquery featured slider pada blog. Kenapa nama dia sebegitu? Smart sgt ke? ntahlah pak belalang. developer kepada koding ini menamakan ia sebegitu. Anda mungkin juga berminat pada posting sy sebelum ini Cara membuat Jquery Features Image Slideshow. Anda lebih skekan yang ini? ikuti step2 dibawah
1 Pergi ke Dashboard > Design > Page Elements > Add a Gadget > Html/javascript
2 Salin dan pastekan koding dibawah
<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/AVvXsEga6E5uKpkOrTYkLmTj9zwNk3wVYgx8v1DF4D0_lYFq7kCZrzciwtyCPprJIWjyzAULOMbOnMrJjpRcVXUyVkcVkjQ-XkrIiek5JDtSaRaDewYDfbkJT0doSxIlSrOiijQrBsj9SjWp8A3Y/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/AVvXsEga6E5uKpkOrTYkLmTj9zwNk3wVYgx8v1DF4D0_lYFq7kCZrzciwtyCPprJIWjyzAULOMbOnMrJjpRcVXUyVkcVkjQ-XkrIiek5JDtSaRaDewYDfbkJT0doSxIlSrOiijQrBsj9SjWp8A3Y/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>
<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='url_gambar1'><img src='Gambar1'/></a></li>
<li><a href='url_gambar2'><img src='Gambar2'/></a></li>
<li><a href='url_gambar3'><img src='Gambar3'/></a></li>
<li><a href='url_gambar4'><img src='Gambar4'/></a></li>
<li><a href='url_gambar5'><img src='Gambar5'/></a></li>
</ul>
</div>
3 Save.
4 Untuk menukar gambar slideshow tukarkan gambar1,2,3,4,5 kepada url gambar anda dan url_gambar1,2,3,4,5 kepada article yang anda mahu linkkan.
5 Selamat mencuba (^^,)
Gadget
Jika anda sukakan article ini,linkkan kembali...
dah lama carik tutorial nie.. nice sharing!
bekas student UMP software engineering kelas nasrol hehe