Cari Artikel Blog Ini

Total Tayangan Laman

JQUERY SLIDE SHOW VERSI 4

Semakin banyak pilihan akan lebih mudah bagi anda untuk menampilkan Slide Show dengan menggunakan file Jquery java script. Pada dasarnya tampilan slide show versi 4 ini memiliki cara yang sama dengan slide show versi sebelumnya. Hanya tampilan akhir pada versi 4 ini, selain gambar, judul dan keterangan di satu sisi (sebelah kiri)serta sisi lainnya (sebelah kanan) juga ditampilkan gambar yang sama dalam ukuran kecil disertai dengan keterangan gambar dibawahnya.

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 ]]></b:skin>

    #featured{
    width:400px;
    padding-right:250px;
    position:relative;
    height:250px;
    background:#fff;
    border:5px solid #ccc;
    }
    #featured ul.ui-tabs-nav{
    position:absolute;
    top:0; left:400px;
    list-style:none;
    padding:0; margin:0;
    width:250px;
    }
    #featured ul.ui-tabs-nav li{
    padding:1px 0; padding-left:13px;
    font-size:12px;
    color:#666;
    }
    #featured ul.ui-tabs-nav li span{
    font-size:11px; font-family:Verdana;
    line-height:18px;
    }
    #featured .ui-tabs-panel{
    width:400px; height:250px;
    background:#999; position:relative;
    overflow:hidden;
    }
    #featured .ui-tabs-hide{
    display:none;
    }
    #featured li.ui-tabs-nav-item a{
    display:block;
    height:60px;
    color:#333; background:#fff;
    line-height:20px;
    outline:none;
    }
    #featured li.ui-tabs-nav-item a:hover{
    background:#f2f2f2;
    }
    #featured li.ui-tabs-selected{
    background:url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlSr0ZiI/AAAAAAAACSg/e2qwCQ5iGlA/selected-item.gif') top left no-repeat;
    }
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{
    background:#ccc;
    }
    #featured ul.ui-tabs-nav li img{
    float:left; margin:2px 5px;
    background:#fff;
    padding:2px;
    border:1px solid #eee;
    }
    #featured .ui-tabs-panel .info{
    position:absolute;
    top:180px; left:0;
    height:70px; width: 400px;
    background: url('https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlQpwAFI/AAAAAAAACSk/ElAPHzwEvIQ/bg.png');
    }
    #featured .info h2{
    font-size:18px; font-family:Georgia, serif;
    color:#fff; padding:5px; margin:0;
    overflow:hidden;
    }
    #featured .info p{
    margin:0 5px;
    font-family:Verdana; font-size:11px;
    line-height:15px; color:#f0f0f0;
    }
    #featured .info a{
    text-decoration:none;
    color:#fff;
    }
    #featured .info a:hover{
    text-decoration:underline;
    }

  4. Keterangan :
    1. Slide show ini disetting pada lebar yang berwarna kuning (width:400px;) dan tinggi ( height:250px;) .Silahkan anda sesuaikan ukurannya dengan tempat menaruh slide show ini. Seandainya takut tampilannya idak keruan, lebar dan tinggi tidak perlu dirubah.
    2. Bacckground berupa image (warna merah) adalah simpanan EPG Studio. Dapat anda ganti dengan milik anda sendiri.

  5. Selanjutnya copy kode dibawah ini kemudian paste tepat diatas kode </head>

    <script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-1.3.2.js" ></script>
    <script type="text/javascript" src="https://sites.google.com/site/epgstudiosite/javascript/jquery-ui.min.js" ></script>
    <script>$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });</script>

  6. Keterangan :
    1. Kedua file js (warna kuning) yang digunakan diatas adalah file js simpanan EPG Studio. Dapat anda ganti dengan file js simpanan anda sendiri.
    2. Angka 5000 merupakan pengaturan kecepatan pergantian gambar slide show, semakin kecil angkanya semakin cepat pertukaran gambarnya. Silakan anda ganti dengan kecepatan yang anda inginkan.
  7. Setelah selesai mengedit kode-kode diatas, klik tombol Simpan Template.


LANGKAH KEDUA
  1. Masuk ke Elemen Halaman
  2. Klik Tambah Gadget
  3. Pilih HTML Javascript
  4. Copy kode dibawah ini kemudian paste pada kolom yang tersedia

    <div id="featured" >
    <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="alamat gambar 1" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="alamat gambar 2" width="50px" height="50px"/><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="alamat gambar 3" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="alamat gambar 4" width="50px" height="50px" /><span>Keterangan gambar anda tulis disini, hanya ringkasannya saja</span></a></li>
    </ul>
    <!-- Konten1-->
    <div id="fragment-1" class="ui-tabs-panel" style="">
    <img src="alamat gambar 1" />
    <div class="info" >
    <h2><a href="#" >Judul postingan 1</a></h2>
    <p>Ringkasan uraian postingan dari judul postingan 1.......<a href="#" >Selengkapnya</a></p>
    </div>
    </div>
    <!-- Konten 2 -->
    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="alamat gambar 2" />
    <div class="info" >
    <h2><a href="#" >Judul postingan 2</a></h2>
    <p>Ringkasan uraian postingan dari judul postingan 2.......<a href="#" >Selengkapnya</a></p>
    </div>
    </div>
    <!-- Konten 3 -->
    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="alamat gambar 3" />
    <div class="info" >
    <h2><a href="#" >Judul postingan 3</a></h2>
    <p>Ringkasan uraian postingan dari judul postingan 3.......<a href="#" >Selengkapnya</a></p>
    </div>
    </div>
    <!-- Konten 4 -->
    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
    <img src="alamat gambar 4" />
    <div class="info" >
    <h2><a href="#" >Judul postingan 4</a></h2>
    <p>Ringkasan uraian postingan dari judul postingan 4.......<a href="#" >Selengkapnya</a></p>
    </div>
    </div>
    </div>

  5. Keterangan : Pada bagian ini harus dikerjakan dengan super teliti karena banyak yang harus anda edit.
    1. pengeditan pertama anda lakukan pada bagian atas yaitu untuk tampilan slide show bagian kanan:# kode tersebut anda ganti dengan alamat /url yang ingin anda tuju jika pengunjung mengklik gambar tersebut.
    2. Kedua yaitu mengganti alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang ditampilkan. Gambar ini tampilannya telah disetting dengan ukuran lebar 50px dan tinggi 50px.
    3. Ketiga (terakhir) ganti kalimat Keterangan gambar anda tulis disini, hanya ringkasannya saja, dengan uraian singkat dari gambar yang ditampilkan.
    4. Berikutnya pengeditan kode bagian bawah (terdapat 4 pengeditan.
    5. Pertama, ganti kalimat url/alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang sama ketika anda mengedit alamat gambar di bagian atas.
    6. Kedua, mengganti # dengan alamat link yang apabila judul diklik oleh pengunjung akan dibawa ke halaman yang dituju oleh link tersebut.
    7. Ketiga, mengganti kalimat Judul postingan 1, 2, 3 dan 4 dengan judul yang ngin anda tampilkan.
    8. Keempat (terakhir), ganti kalimat Ringkasan uraian postingan dari judul postingan ....... 1, 2, 3 dan 4 dengan uraian singkat tentang gambar dan judul yang ditampilkan.
    9. Ganti kata Selengkapnya dengan kata yang anda sukali, misalnya read more.
    10. Sekali lagi, dalam bagian ini anda melakukan pengeditan dengan teliti jika hasil yang diinginkan tercapai dengan baik.
    11. Setelah selesai pengeditan, klik tombol Simpan
    12. Lihat Slide Show pada blog anda
Selamat mencoba, semoga bermanfaat...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

AQIL mengatakan...

assalamualaikum,
alhamdulillah
berkat pertolongan allah,
akhirnya saya menemukan script jquery ini,
akhirnya slide saya bisa jalan
terima ksaih
terima kasih sekali lagi
http://samuderailmuagama.blogspot.com/

Iwankitty mengatakan...

maap langkah yang terakhir apa harus kecil juga gambarnya?

zaenal mengatakan...

link dibawah darimana, dan buatnya gmn?
mohon pencerahan!

https://lh4.googleusercontent.com/_1j80TgNqd_8/TZrSlQpwAFI/AAAAAAAACSk/ElAPHzwEvIQ/bg.png
https://sites.google.com/site/epgstudiosite/javascript/jquery-1.3.2.js
https://sites.google.com/site/epgstudiosite/javascript/jquery-ui.min.js

Reza Fachreza mengatakan...

permisi, saya malah lbh tertarik slide show seperti slide show Artiker Terbaru agan, blh kasih tau cara buat yg seperti itu ?? thanks before

http://newbie-just-share.blogspot.com/

Posting Komentar

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