Aku Punya dot com

Tidak Punya Ide Untuk Menulis

  • Home
  • Kontak
 
HomeBlogCara membuat slideshow
08
Okt
2009

Cara membuat slideshow

Posted by: admin

Cara membuat foto/image slideshow.
Oke langsung aja tanpa panjang lebar, kalau lebar mulutnya siapa..??
Mari ikuti langkah-langkah dibawah untuk membuat slideshow seperti contoh demo.
Demo:


Langkah-langkahnya adalah:
Letakkan kode berikut dibagian <head> website/blog kamu:

Salin kode JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

Kemudian letakkan kode berikut dibagian body konten website/blog kamu:

Salin kode DIV
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<center>
<form name=slideform>
<tr>
<td align=center bgcolor="white">
<b>Image Slideshow</b>
</td>
</tr>
<div style="border: 1px solid #ccc; padding-top: 10px; margin: 3px;
overflow: auto; 
width: 350px; 
height: 130px;
">
<tr>
<td align=center bgcolor="white">
<img src="images1.jpg" name="show">
</td>
</tr>
</div>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="images1.jpg" selected>Gambar 1
<option value="images2.jpg">Gambar 2
<option value="images3.jpg">Gambar 3
</select>
 
<input type=button onClick="first();" value="|<<" title="Beginning">
 
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
 
</tr>
</table>
</form>
</center>

Ganti file images1.jpg, images2.jpg dan images3.jpg dengan file gambar milik kamu.
Selesai! Selamat mencoba..


memuat halaman
Reload
«
»
iklan

60 Komentar

Blog, Javascript, Tips trik blog

Postingan yang lain:
  • Cara membuat toggle show hide
  • Cara membuat gambar melayang
  • Cara mengganti emoticon WordPress
  • Agar emoticon tidak muncul di sisi kiri post
  • Menghilangkan meta generator wordpress

Ada 60 komentar di “Cara membuat slideshow”

Tulis komentar
‹ sebelumnya 1 2 3 berikutnya ›
Komentar dari admin:
Dari IP: 125.167.235.186
Tanggal 26 November 2010 jam 8:11 pm

klo mo slideshow yg lebih mantab dan ada efek fadenya, bro bisa download scriptnya disini: http://dev.herr-schuessler.de/jquery/popeye/ ;-)
atau kalau bro menggunakan wordpress, pluginnya bisa didownload disini: http://wordpress.org/extend/plugins/popeye/ :razz:

Balas komentar

Komentar dari Peluang Bisnis Online Cerdas:
Dari IP: 180.214.232.4
Tanggal 17 Desember 2010 jam 5:39 am

thanx kawan, arikelnya keren.. salam sukses ;-)

Balas komentar

Komentar dari saya:
Dari IP: 118.96.206.252
Tanggal 20 Desember 2010 jam 9:38 am

ko yang ane gambarnya ga ganti gan..?? bingung ane gan ud ngulik2 ga ketemu :roll:

Balas komentar

Komentar dari admin:
Dari IP: 64.255.164.103
Tanggal 20 Desember 2010 jam 2:25 pm

klo file gambarnya kegedean slide nya agak susah sob.. jd musti diresize dulu.. :roll:

Balas komentar

Komentar dari visto7:
Dari IP: 111.68.26.157
Tanggal 16 Februari 2011 jam 11:18 pm

Josss! :mrgreen:

Balas komentar

Komentar dari arie:
Dari IP: 180.214.232.6
Tanggal 25 Februari 2011 jam 6:31 pm

mas gimana mau ambil datanya kalau blog mas pake anti copas

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.15
Tanggal 25 Februari 2011 jam 7:27 pm

klo mo copas kodenya, klik aja tulisan ‘Salin kode’

Balas komentar

Komentar dari edhy:
Dari IP: 110.137.242.198
Tanggal 29 Maret 2011 jam 4:42 pm

haii ..

Balas komentar

Komentar dari edhy:
Dari IP: 110.137.242.198
Tanggal 29 Maret 2011 jam 4:45 pm

haii smuaaa :ayolah:

Balas komentar

Komentar dari Achmad Ridwan:
Dari IP: 180.246.65.151
Tanggal 19 Mei 2011 jam 4:29 pm

Gan Kode’y taruh mn ?
msh bingung q, g jelas naruh’y..
1. kode’y taruh atas atau, bwh ?
2. body ?

Mohon penjelasan’y lagi, Tq Gan !!!

Balas komentar

Balasan dari admin:
Dari IP: 110.139.124.14
Tanggal 19 Mei 2011 jam 4:58 pm

kode yg prtama itu pasang diatas baris </head>

klo kode yg kedua itu bisa dipasang dibagian ‘Gadget’.

..slideshow yg sprti ini mmg agak berat mas, tergantung ukuran gambar.. :roll:

Balas komentar

Balasan dari Achmad Ridwan:
Dari IP: 125.163.142.90
Tanggal 19 Mei 2011 jam 5:42 pm

kode yang pertama g isa Gan, mlah error… :puyeng:

Balas komentar

Komentar dari Achmad Ridwan:
Dari IP: 125.163.142.90
Tanggal 19 Mei 2011 jam 5:29 pm

Tq info’y, saya coba dlu..
klo msh bingung, tanya lgi gpp kan ?

Balas komentar

Komentar dari Achmad Ridwan:
Dari IP: 125.163.142.90
Tanggal 19 Mei 2011 jam 5:34 pm

kode yg pertama saya taruh di ats kok malah error ..
:shock:

Balas komentar

Balasan dari admin:
Dari IP: 125.167.234.215
Tanggal 19 Mei 2011 jam 8:38 pm

mungkin itu xml error mas..

mas bisa lihat cara pasang kodenya dipostingan aku yg ini >> :grin:

Balas komentar

Komentar dari Baweb:
Dari IP: 203.78.121.9
Tanggal 26 Juni 2011 jam 9:45 am

wah bg bgt infonya….

Balas komentar

Komentar dari eko:
Dari IP: 223.255.226.154
Tanggal 29 Juli 2011 jam 4:09 am

ane cobain ya bozz….thank infonya :roll:

Balas komentar

Komentar dari Shinobi Blog:
Dari IP: 202.152.172.225
Tanggal 29 Juli 2011 jam 3:08 pm

keren nih… tapi kayakna bikin blog tambah berat de’. . . . !! ..

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.106
Tanggal 29 Juli 2011 jam 4:20 pm

ya, klo menggunakan gbr berukuran besar, loadingnya jd berat..

Balas komentar

Komentar dari Description of herbal plants:
Dari IP: 182.2.234.45
Tanggal 5 Agustus 2011 jam 8:43 am

Wahjadi tergantung gambarnya yah.? kalo gambar berat jadi loading juga berat ya?

Balas komentar

Balasan dari admin:
Dari IP: 64.255.180.148
Tanggal 5 Agustus 2011 jam 10:25 am

iya mas tergantung gambarnya.
klo mo slideshow yg lumayan cepat bisa menggunakan jquery slideshow

Balas komentar

Komentar dari Alex Irfani:
Dari IP: 121.58.187.18
Tanggal 15 Agustus 2011 jam 8:26 pm

wah… keren negh. mas, tp kalau misah option value=”image.jpg” nya saya ganti dengan bs gak mas ? soal nya saya msh pakai hosting gb.Photobucket, heheee

terus kl slide ky gini tuh bikin loading blog lelet gak sih ? thn’x

Balas komentar

Balasan dari admin:
Dari IP: 110.139.125.86
Tanggal 15 Agustus 2011 jam 8:41 pm

bisa kok mas, saya ngetesnya juga pke photobucket.

klo loading blog tergantung ukuran gambar mas, semakin besar ukuran gambar semakin berat loading blognya :roll:

Balas komentar

Komentar dari Dani:
Dari IP: 180.253.123.28
Tanggal 16 Agustus 2011 jam 7:58 pm

Nah loh…error euy…..

Balas komentar

Komentar dari novan:
Dari IP: 202.152.243.19
Tanggal 19 September 2011 jam 1:32 am

msukin na kmn ni ???
java script??

Balas komentar

Balasan dari admin:
Dari IP: 64.255.164.89
Tanggal 19 September 2011 jam 1:20 pm

kode yg pertama pasang di html editor tepat di atas baris </head>

kode yg kedua pasang di bagian gadget atau widget

Balas komentar

Komentar dari baju bali:
Dari IP: 112.215.36.181
Tanggal 24 Oktober 2011 jam 2:19 am

bingung gan, maklum nubi gak ngerti bahasa gituan… :oops:

Balas komentar

Balasan dari admin:
Dari IP: 141.0.10.40
Tanggal 24 Oktober 2011 jam 1:11 pm

pkai plugin aja mas.. lebih gampang.. :D

Balas komentar

Komentar dari Cherry:
Dari IP: 114.79.13.125
Tanggal 28 Oktober 2011 jam 7:23 pm

saya hanya mengiklankan saja ya . saya disini hanya ingin membagi2kan ilmu kepada kalian.
mengenai problem tentang social network, semisal facebook, twitter. disini anda akan melihat akun org lain atau yg lagi chatingan sama seseorang anda bisa melihat org yg lagi chatingan itu dan aplikasi wirshark ini bisa langsung mendetek ke alamat email seseorang , silahkan boleh dicoba . http: //www.ziddu.com/download/17047997/wireshark-win32-1.6.2.rar.html

Balas komentar

‹ sebelumnya 1 2 3 berikutnya ›

Tulis Komentar


website / blog

Komentar:

Emoticon
Emoticon:
X
icon_smile.gif icon_wink.gif icon_neutral.gif icon_mad.gif icon_wc.gif icon_uhuk.gif icon_twisted.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_puyeng.gif icon_pliss.gif icon_payah.gif icon_lidah.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_kencing.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_dead.gif icon_cry.gif icon_cool.gif icon_bom.gif icon_bisik-bisik.gif icon_ayolah.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

Batalkan balasan
 
    CO.CC Free Domain
  •     Komentar terbaru

    • admin: bisa kok, coba aja pasang.. ni #
    • admin: ok.. kodenya sdh diganti.. ^_^ #
    • iiN: sieeppp .... *thumsup* di tun #
    • iiN: mw nanya neeh mas.... emang' #
    • admin: ok ok .. sip deh .. hehe.. : #
    • admin: he.. ntar kodenya aku ganti aj #
    • iiN: iin baru belajar ngeblog hee.. #
    • iiN: ooooowhhh .... gtu toh mas :-| #
    • admin: bisa, ganti dgn auto / pointer #
    • admin: iya sama2... makasih kunjungan #
  •     Kategori

    • Adsense
    • Aneh
    • Biografi
    • Blog
    • Cewek
    • CSS
    • CSS3
    • Dofollow
    • DVD
    • Emoticon
    • Facebook
    • Game
    • Google
    • Gratis
    • Hiburan
    • Javascript
    • Kamus Online
    • Kesehatan
    • Kiamat
    • Kids
    • Komik
    • Lucu
    • Menu Bulan Puasa
    • Mp3
    • PHP
    • Rank
    • Resep
    • Search Engine
    • SEO
    • Sitemap
    • Story
    • Tak Berkategori
    • Tak Penting
    • Tips
    • Tips trik blog
    • Traveling
    • Twitter
    • Wedding
    • Wordpress
    • Youtube
  •     Arsip

    • Mei 2012
    • April 2012
    • Maret 2012
    • Februari 2012
    • Januari 2012
    • Desember 2011
    • November 2011
    • Oktober 2011
    • September 2011
    • Agustus 2011
    • Juli 2011
    • Juni 2011
    • Mei 2011
    • April 2011
    • Maret 2011
    • Februari 2011
    • Januari 2011
    • Desember 2010
    • November 2010
    • Oktober 2010
    • September 2010
    • Agustus 2010
    • Juli 2010
    • Juni 2010
    • Mei 2010
    • April 2010
    • Maret 2010
    • Februari 2010
    • Januari 2010
    • Desember 2009
    • November 2009
    • Oktober 2009
    • September 2009
    • Agustus 2009
    • Juli 2009
    • Juni 2009
    • Mei 2009
    Adsense Indonesia
    iklan
      Page: /cara-membuat-slideshow.html/comment-page-2 : Test Link 1
      Test Link 2
      Test Link 3

Aku Punya dot com © 2009 - 2012
Powered by WordPress
Best viewed in Firefox, Opera, and Chrome at 1280 x 960 screen resolutions

Feed  |  Sitemap  |  Recent Posts
Tukar Link  |  Pasang Banner  |  Kontak

23 queries. 0,793 seconds

Toolbar
tulis komentar
     
60 komentar
Komentar 60
kembali ke bawah
Bawah
kembali ke atas
Atas
Games
  • »  Game Puzzle
  • »  Game Tetris
  • Game Puzzle  
     
    Game Tetris  
     
    Shoutbox
    Shoutbox  

     
    Suka
    Aku Punya fans  
     
    Pencarian
    memuat ...