> Cara membuat slideshow

Selasa, 18 Januari 2011

19

Cara membuat slideshow

Biasanya slideshow di taruh pada halaman utama sebuah web ataupun blog. Dalam hal ini slideshow banyak digunakan untuk menampilkan profil sebuah website ataupun blog, ada juga website yang menggunakan slideshow untuk menampilkan produknya.
Silahkan anda LIHAT DEMO DISINI.
 

Dengan slideshow ini, anda tidak perlu menggunakan java script yang diberikan jasa pembuat slide. Anda bisa menambahkan slideshow pada web atau blog anda dengan membuat slideshow sendiri. Dan cara buatnya sangat mudah, yaitu anda tinggal copy paste kode-kode dibawah, kemudian anda bisa mengubah  kecepatan  tampilan slide dan ukuran panjang serta lebar gambar yang disesuaikan dengan web atau blog anda. Kemudian anda tinggal mengganti ulr yang ada dengan ulr gambar anda dan memberi uraian setiap gambar yang akan ditampilkan.
OK...!!!, Silahkan kuti langkah-langkah yang saya berikan di bawah ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 5 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h1></h1><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h1').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({left:500}, 300, function () {
                //Display the content
                $('#slideshow-caption h1').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({left:0},1000);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:500px;
height:320px;
overflow:hidden;
position:relative;
margin:5;
padding:5;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:500px;
height:300px;
border:none;
}
#slideshow-caption {
width: 500px;
height: 100px;
margin-left: 5px;
padding-left: 20px;
padding-top: 10px;
color:#000;
background:#fff;
z-index:500;
}

#slideshow-caption .slideshow-caption-container {
margin-left: 5px;
padding-left: 0px;
z-index:1000;
}
#slideshow-caption h1 {
margin-left: 20px;
padding-left: 10px;
font-size: 30px;
}
#slideshow-caption p {
margin-left: 20px;
padding-left: 10px;
padding-bottom: 10px;
}
</style>
Keterangan :
Ganti nilai dari width:600px; height:240px; sesuai dengan kebutuhan web atau blog anda.
Ganti nilai dari waktu slideShow(3000); sesuai keinginan anda.

Langkah selanjutnya :
4. Simpan  template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :


<ul class="slideshow">

<li><a href="#"><img src="http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg" title="Judul Description/uraian ke 1" alt="Ganti tulisan ini dengan Description/uraian 1 anda" /></a></li>

<li><a href="#"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg" title="Judul Description/uraian ke 2" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

<li><a href="#"><img src="http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg" title="Judul Description/uraian ke 3" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

<li><a href="#"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg" title="Judul Description/uraian ke 4" alt="Ganti tulisan ini dengan Description/uraian ke 2 anda" /></a></li>

</ul>
Keterangan :
Anda dapat menambahkan lebih banyak gambar dan uraian untuk dijadikan slide, sesuai yang Anda inginkan.

OK...!!! Silahkan anda mencoba.
Semoga bermanfaat untuk anda, jangan lupa luangkan waktu anda sebentar untuk memberi komentar anda dibawah ya........ Terima kasih.

Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat slideshow"
Diulas Oleh : | Selasa, 18 Januari 2011 | 19.30
Description : Biasanya slideshow di taruh pada halaman utama sebuah web ataupun blog. Dalam hal ini slideshow...

Rating : 6.4 Dari 10, Berdasarkan 1900+ Dari 19 000+ Pengunjung.



19 komentar:

  1. GREAT BLOG ! and i love mostly this content..

    BalasHapus
  2. mantap bang... trim atas info nya.. mo coba dulu ahh...

    BalasHapus
  3. Thanks berat Gan, scriptnya bener2 tok cer udah aye praktekin matur thank you ^^

    BalasHapus
  4. Rumah Info..., sama-sama...

    BalasHapus
  5. mas mau tanya...
    kenapa kalok di pakek...
    menu nya ketutup slide shownya..?

    sebelumnya makasih gan,,
    samean liat dulu disini..

    http://aiwmerchandise.blogspot.com/

    BalasHapus
  6. mohon infonya gan, ane mau pasang di website ane, bukan di blog, trus cara pemasangan gangetnya gmna gan?
    mohon bantuannya gan, biar tidak terselip, tolong di email ke kalibendo@yahoo.com ya.
    makasi sebelumnya

    BalasHapus
    Balasan
    1. Mohon tinggalkan nama dan link website anda, Insya Allah saya akan bantu anda... OK...

      Hapus
    2. saya baru mau membuat web gan,
      nama ane fahrur
      www.nkri.net

      Hapus
    3. sobat fahrur, Dengan menggunakan apa anda akan membuat website? web anda belum memiliki template...., sebaiknya upload dulu template anda. Slide show merupakan aplikasi tambahan yg bisa anda tambahkan setelah web anda jadi, sehingga anda bisa menyesuaikannya dengan web anda.

      Jadi buat dulu web anda....

      Bila anda belum pernah membuat web sebelumnya... lebih enak anda membuat web dari platform wordpress, jomla, atau yang lain.

      Selain tidak ribet, web2 diatas memiliki script yg lebih profesional. selain itu sudah banyak template2 gratis yg bisa anda gunakan dan diedit sendiri.

      Bila anda menggunakan platform wordpress... gunakan template wordpress, baik untuk bisnis atau yg lain. Anda bisa dapatkan gratis di : http://freewpthemes.co/


      Kebanyakan situs2 besar menggunakan web wordpress dan jomla.

      Hapus
    4. sepertinya saya mau membuat web dengan cms mambo untuk address utama, dan pake cms phpbb subdmain sebagai link forum saya, mungkin akan ada beberapa sub sub domain yg lain pak.
      kalo bisa kita YM an saja pak nur

      Hapus
    5. Silahkan anda jadikan dulu web anda....
      .... bisa kita YM an

      Hapus
  7. minta ijin copas kang, buat penggunaan pribadi aja, saya simpan di blog saya kangdiar.blogspot.com. Link ke blog ini dan link ke blog contohdemo.blogspot.com saya cantumkan. Thx

    BalasHapus
  8. bagus sekali, slider semacam ini bisa makin memperindah tampilan blog selain itu bisa membantu mendapatkan banyak pageview
    nice share

    BalasHapus
  9. Ilmu yang menarik lagi bermanfaat, salahsatu ciri blog profesional with headline slideshow. I like it.

    BalasHapus
  10. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
    Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-

    BalasHapus
  11. hatur nuhuun ilmunya kaka :)
    salam www.canopybagus.com

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down