/

Jquery Slide Show Versi 4

Edit
Semakin banyak pilihan akan lebih gampang bagi anda untuk menampilkan Slide Show dengan memakai file Jquery java script. Pada dasarnya tampilan slide show versi 4 ini mempunyai cara yang sama dengan slide show versi sebelumnya. Hanya tampilan final 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 bab Edit HTML
  3. Copy aba-aba dibawah ini lalu paste sempurna 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 daerah menaruh slide show ini. Seandainya takut tampilannya idak keruan, lebar dan tinggi tidak perlu dirubah.
    2. Bacckground berupa image (warna merah) yaitu simpanan EPG Studio. Dapat anda ganti dengan milik anda sendiri.

  4. Selanjutnya copy aba-aba dibawah ini lalu paste sempurna diatas aba-aba </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>

    5. Keterangan :
    1. Kedua file js (warna kuning) yang dipakai diatas yaitu 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.
  5. 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 aba-aba dibawah ini lalu 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 bab ini harus dikerjakan dengan super teliti alasannya yaitu banyak yang harus anda edit.
    1. pengeditan pertama anda lakukan pada bab atas yaitu untuk tampilan slide show bab kanan:# aba-aba tersebut anda ganti dengan alamat /url yang ingin anda tuju kalau 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 aba-aba bab bawah (terdapat 4 pengeditan.
    5. Pertama, ganti kalimat url/alamat gambar 1, 2, 3 dan 4 dengan alamat gambar yang sama dikala anda mengedit alamat gambar di bab 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 ihwal gambar dan judul yang ditampilkan.
    9. Ganti kata Selengkapnya dengan kata yang anda sukali, contohnya read more.
    10. Sekali lagi, dalam bab ini anda melaksanakan pengeditan dengan teliti kalau hasil yang diinginkan tercapai dengan baik.
    11. Setelah selesai pengeditan, klik tombol Simpan
    12. Lihat Slide Show pada blog anda
Selamat mencoba, biar bermanfaat...!!!
Sumber http://epg-studio.blogspot.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel