Cara Membuat Slideshow Dengan Jquery Cycle Plug In

5/23/2011 JQuery Tips dan Trik Widget
Slid Show JqueryjQuery Cycle Plugin adalah sebuah Slideshow Plug In yang ringan dan cukup mengagumkan. Plugin ini menyediakan sebuah metode pemanggilan cycle yang di libatkan pada sebuah element container,yang mana tiap-tiap bagian element dari container menjadi sebuah slide. Jika sobat tertarik menggunakan jquery slideshow dengan cycle plugin untuk blogger khususnya atau website sobat ikutilah langkah-langkah di bawah ini

  1. Seperti biasa sobat harus log in dulu ke blogger
  2. Pilih Rancangan
  3. Kemudian pilih Edit HTML
  4. centang Expand Widget Templates dan backup dulu templete sobat (untuk menghindari apabila terjadi kesalahan)
  5. Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
    <script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myslides').cycle({
    fx: 'cover',
    speed: 500,
    timeout: 2000
    });
    });
    </script>



  6. Untuk code CSS di bawah ini sobat copy dan pastekan diatas kode ini ]]></b:skin>

    #myslides {
    width: 370px;
    height: 220px;
    padding: 0;
    margin: 0 auto;
    }

    #myslides img {
    padding: 10px;
    border: 1px solid rgb(100,100,100);
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top: 0;
    left: 0
    }


    PERHATIAN
    Sobat bisa mengedit kode css diatas sesuai dengan yang sobat inginkan misalnya width (lebar slidshow/gambar) dan height (tinggi slideshow/gambar)


  7. Langkah yang terakhir adalah sobat memasang kode HTML di bawah ini dimana sobat ingin meletakkan SlidShow tersebut dengan mendambah Gadget.


<div id="myslides">
<img src="http://my-slideshow.googlecode.com/files/cilimus.jpeg.jpg" />
<img src="http://my-slideshow.googlecode.com/files/air-panas.jpg" />
<img src="http://my-slideshow.googlecode.com/files/gunung-ciremai.jpg" />
<img src="http://my-slideshow.googlecode.com/files/telaga-remis.jpg" />
<img src="http://my-slideshow.googlecode.com/files/kolamlinggarjati.jpg" />
</div>

PERHATIAN
kode yang berwarna kuning adalah alamat Gambar. Silahkan sobat ganti dengan alamat gambar sobat.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

21 comments

tutorial mantap kang, langsung coba ni kang

Balas

Kang, contohnya seperti apasih? maklum aku new + gaptek :f

Balas

@Wanita yam masa gak paham, SlidShow Photo saya sakin pasti bisa membayangkannya, soalnya saya males bikin Demonya :D

Balas

kok ngak tetap chatboxnya sob...kadang ada kadang ngak ada...

Balas

@Seri Bahasa massa sob mungkin lagi gak hadir kali, coz Blog saya sering eror

Balas

UUUUYY. .. COBA MINTA TUTORIAL OFFICE 2007. . . . .FULL CRACK


DITUNGGU KIRIMAN IMAILNA

Balas

mantep kang tutorialnya n mantep jg blognya, tapi ngomong2 agak sedikit berat kang buka blognya, apa krn bnyk pake script ya?

ditunggu kunjungan baliknya :)

Balas

Selalu berkunjung ke blog sahabat.."kang ade"..tetap semangat dan suksesok
Salam PERSAHABATAN

Balas

@Rachman Abdillah Terimakasi Sob tas kunjungan n comenya,Salam Sukses Selalu

Balas

kang, kalo aku mau bikin slideshow nya bukan image, tapi page php gmna ya?
kalo boleh tau, gmna ya caranya jquery cycle plugin ini membedakan setiap slide nya?

Balas

Wow manteps nih blognya mas, mksh tutorialnya...

Balas

kang mo tanya lw nge backup tu gmna kang,,,,,,,mksud nya...... hehehe..mkch kang

Balas

kalo waktu ada kursor truz slidenya berhenti itu gmna gan ?

Balas

kagak bisa mas hasilnya 0,, malah ada peringatan bahwa ada kesalahan

Balas

Verry Nice and informative blog, Keep Spirit!!!

Balas