Aku Punya dot com

Tidak Punya Ide Untuk Menulis

  • Home
  • Kontak
 
Home > Blog > Cara 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:
  • Agar emoticon tidak muncul di sisi kiri post
  • Kamus online om Google
  • Cara meletakkan iklan diantara postingan
  • Cara membuat read more otomatis di blogspot
  • Tukar link

Ada 60 komentar di “Cara membuat slideshow”

Tulis komentar
‹ sebelumnya 1 2 3
Komentar dari jembross komik:
Dari IP: 118.97.81.131
Tanggal 13 Desember 2011 jam 2:02 pm

klo imagenya diganti dengan postingan bisa gak mas, jadi begitu ada postingan baru langsung ada pada slideshow pertama, soalnya blog saya blog komik (http:komikdikit.blogspot.com ), saya pengen tampilannya seperti comicpress ada navigasi next, Prev dan random

Balas komentar

Balasan dari admin:
Dari IP: 125.167.235.186
Tanggal 13 Desember 2011 jam 5:28 pm

coba pke jquery slideshow aja mas, rasanya pernah lihat blogspot yg pke slideshow itu, mas bisa cari tutorialnya digoogle

klo yg di comicpress itu pkai plugin wordpress mas, wordpress self hosted..

Balas komentar

Komentar dari jembross komik:
Dari IP: 112.215.66.51
Tanggal 13 Desember 2011 jam 7:25 pm

Betul mas comicpress harus selfhosting karena itu saya cari alternatif slideshow yang bisa diterapkan diblogspot, saya nemu beberapa di google, tapi yang menurut saya tampilannya paling cocok tuk komik saya adalah yang tutorial yang mas ini. btw terima kasih banyak tutorialnya, saya akan coba lagi.

Balas komentar

Balasan dari admin:
Dari IP: 125.167.235.186
Tanggal 13 Desember 2011 jam 9:40 pm

ok silahkan dilanjutkan mas…
makasih kunjungannya..

Balas komentar

Komentar dari sazly rais:
Dari IP: 180.246.53.253
Tanggal 20 Desember 2011 jam 5:56 pm

mkasih booosss !!
he he he

Balas komentar

Komentar dari yusuf:
Dari IP: 125.163.215.95
Tanggal 11 Januari 2012 jam 10:32 am

sangat membantu,,,, mampir ya

Balas komentar

Komentar dari arief:
Dari IP: 39.211.198.135
Tanggal 16 Januari 2012 jam 4:23 pm

mas, itu yang di script line 30,31 uda selesai ngetiknya apa belom ?

kok eror ya di line tsb
makasi sebelumnya

Balas komentar

Balasan dari admin:
Dari IP: 141.0.8.87
Tanggal 16 Januari 2012 jam 5:53 pm

klo untuk blogspot, sblm dipasang kode javascriptnya itu harus diparsing dulu mas…

klo js nya langsung dipasang akan muncul error

Balas komentar

Komentar dari sukague.com:
Dari IP: 180.251.118.67
Tanggal 26 Januari 2012 jam 6:28 pm

yg khusus blogger dong..

Balas komentar

Balasan dari admin:
Dari IP: 110.139.125.86
Tanggal 27 Januari 2012 jam 8:27 pm

diblogger juga bisa mas, pasang di ‘Tambah Gadget’ > nanti pilih ‘HTML/JavaScript’
:grin:

Balas komentar

‹ sebelumnya 1 2 3

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

    • @ayu_ayudewi: kok lama sih lodingnya? :wc: #
    • Niko98.com: MAU DOWNLOAD GAMES GAMES GRATI #
    • Lmag: efeknya keren, daunnya pada be #
    • gm{joker}: tu loe bisa aneh ya loe #
    • sfdxg: ya adah kok gk ada karakteh wa #
    • sfdxg: hei loe cadet sinih bay pb ama #
    • akbar: aku anak yang rajin loe wow #
    • akbar: kalau ginuh gw ngapain enak ma #
    • admin: itu diatas gambar2 jam, step2n #
    • muzli: q pk blogspot, diatas dimana,, #
  •     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

    • 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
    ...
      Page: /cara-membuat-slideshow.html : Ibm Thinkpad T20 Battery
      Maison Vacances à Louer Galicie
      Love And Friendship Quotes

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

26 queries. 0,584 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 ...