Cari Artikel Blog Ini

Total Tayangan Laman

JQUERY SLIDE SHOW VERSI 3

Jquery slide show versi 3 ini hanya menampilkan gambar dengan ketrangan yang dapat diatur tempatnya, bisa diatas gambar maupun dibawah gambar, tinggal memilih mana yang tampilannya lebih oke...!!

Demo : perhatikan gambar dibawah ini :



CARA MEMBUATNYA :

LANGKAH PERTAMA
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Edit HTML.
  3. Copy kode dibawah ini kemudian paste tepat diatas kode </head>

    <script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/epgstudiosite/javascript/s3Slider.js' type='text/javascript'/>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 10000
    });
    });
    </script>

    1. Kedua file Javascript dapat anda ganti dengan milik anda sendiri
    2. Kode timeOut: 10000 , merupakan kecepatan pergantian image. Semakin kecil angkanya semakin cepat pergantiannya. Silakan anda ganti angkanya dengan kecepatan yang anda inginkan.
  4. Selanjutnya, copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

    #s3slider {
    border:5px solid white;
    width:660px;
    height:290px;
    position: relative;
    overflow: hidden;
    }

    #s3sliderContent {
    margin: 0px; padding:0px;
    width:660px;
    position: absolute;
    bottom: 0;
    margin-left: 0;
    }

    .s3sliderImage {
    float: left;
    position: relative;
    display: none;
    }

    .s3sliderImage span {
    position: absolute;
    left: 0;
    text-indent: 0px;
    font: 20px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    margin: 0;
    width:660px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: block;
    bottom: 0;
    }
    .clear {
    clear: both;
    }
  5. Keterangan :
    1. Slide show ini disetting dengan lebar width:660px; dan tinggi height:290px; Silakan nada ganti lebar dan tingginya sesuai dengan keperluan.
    2. Huruf pada keterangan gambar berukuran font: 20px , silakan anda ganti dengan ukuran yang anda inginkan.
    3. Keterangan gambar diletakkan dibagian bawah gambar. Jika anda ingin meggantinya menjadi diatas gambar, ganti kode bottom: 0; menjadi top: 0; .Ingat kode bottom: 0; ada dua, ganti kedua-duanya.
    4. Boder dari slide show berwarna putih border:5px solid white; ganti dengan warna pilihan anda
    5. Jika sudah selesai mengedit pada bagian pertama, klik tombol Simpan Template.


LANGKAH KEDUA

  1. Masuk ke Rancangan bagian Elemen Halaman.
  2. Klik Tambah Gadget.
  3. Pilih HTML/JavaScript.
  4. Copy code dibawah ini kemudian paste pada kolom yang tersedia.

    <div id="s3slider">
    <ul id="s3sliderContent">
    <li class="s3sliderImage">
    <a href="Url/alamat link target dari gambar 1"><img src="Url/Alamat gambar 1"/></a>
    <span>Keterangan/uraian singkat dari gambar 1</span>
    </li>
    <li class="s3sliderImage">
    <a href="Url/alamat link target dari gambar 2"><img src="Url/Alamat gambar 2"/></a>
    <span>Keterangan/uraian singkat dari gambar 2</span>
    </li>
    <li class="s3sliderImage">
    <a href="Url/alamat link target dari gambar 3"/><img src="Url/Alamat gambar 3"/></a>
    <span>Keterangan/uraian singkat dari gambar 3</span>
    </li>
    <li class="s3sliderImage">
    <a href="Url/alamat link target dari gambar 4"/><img src="Url/Alamat gambar 4"/></a>
    <span>Keterangan/uraian singkat dari gambar 4</span>
    </li>
    <li class="s3sliderImage">
    <a href="Url/alamat link target dari gambar 5"/><img src="Url/Alamat gambar 5"/></a>
    <span>Keterangan/uraian singkat dari gambar 5</span>
    </li>
    <div class="clear s3sliderImage"></div>
    </ul>
    </div>
    1. Tulisan Url/alamat link target dari gambar 1, 2,3, 4 dan 5 anda ganti dengan link target yang akan dituju ketika dilkik pengunjung
    2. Tulisan Url/Alamat gambar 1, 2, 3, 4 dan 5 anda anti dengan Url/alamat gambar yang ingin ditampilkan.
    3. Tulisan Keterangan/uraian singkat dari gambar 1, 2, 3, 4 dan 5 dapat anda ganti dengan pesan yang ingin disampaikan pada slide show
  5. Setelah selesai pengeditan, klik tombol Simpan.
  6. Lihat Slide show pada blog anda.


Selamat mencoba,semoga bermanfaat...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
1 Comments

1 komentar :

Blogger proo mengatakan...

mastab gan, kunjungi juga http://palingunik.co.cc/

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!