mtasolutions


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 (^^,)










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Ahad, 12 Disember 2010

1 Responses to Cara Letak Smart JQuery Featured Slider Pada Blog

  1. Tanpa Nama Says:
  2. dah lama carik tutorial nie.. nice sharing!

    bekas student UMP software engineering kelas nasrol hehe

     

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com