Slide Show Humble jQuery
Slide Show Humble jQuery ini ane share atas permintaan sobat Tukang Colong..
yg mengeluh karena banyaknya banner yg harus dipajang di halaman depan..
Baiklah..
Karena ane orang nya baik hati dan tidak sombong..
ane buat Slide show Humble jQuery ini..
Tapi kekurangan Slide Show Humble jQuery ini adalah :
Kita harus mengklick tombol star terlebih dahulu untuk melihat slide show gambar berikutnya.
Demo Slide Show Humble jQueryKlik disini untuk melihat demo Slide Show Humble jQuery
Gimana ???
Ada yang tertarik memasang slide show ini??
sebenarnya sangat mudah untuk memasang nya loh..
Begini neg caranya :
Langkah 1
Letakan kode di bawah ini diatas kode </head>
<script type='text/javascript'>
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);
}
}
</script>
Simpan template dan lanjut ke tahapan selanjutnya.
Langkah 2
Tambahkan kode dibawah ini pada add gadget HTML/Java Script
<center>
<form name=slideform>
<tr>
<td align=center bgcolor="white">
<b>Slideshow Humble jQuery</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 images1.jpg, images2.jpg, images2.jpg dengan url gambar/banner sobat.
- Aturlah ukuran Widht dan Hight nya sesuai dg sidebar or keinginan sobat.
- Kata-kata Slideshow Humble jQuery bisa sobat rubah sesuai keinginan sobat.
Source Code Slideshow HumbleKlik disini untuk mengambil semua source code Slideshow Humble jQuery
Langkah 3
Simpan dan lihat blog sobat.
Langkah 4
Selesai.
Langkah 5
Semoga bermanfaat..
Terimakasih.
Posted by Girant_31
on 07.00. Filed under
jQuery,
Tips n Trik
.
You can follow any responses to this entry through the RSS 2.0.
Feel free to leave a response
di coba dulu ahh ntar kalau ada waktu luang jadi ane copy dulu ke word ya gpp kan
halo sobat selamat pagi
berkunjung nich
infonya bagus
terima kasih dan semoga sukses selalu.
selamat pagi,...
hemmm kerennn infonya,sambil mikir gimana caranya ya ?? hehe...
have a great day...
Memang mengasyikan kalu udah belajar jQuery, pengennya sih mau aQ pasang di blogQ, tapi..... Blog ane udah agak berat nih..., Heheheehhehehe.............
boleh dicoba, terlebih saya suka sekali masang gambar :)
nyobain ngutak atik lagi bro :)
Aku coba dulu kawan
Kunjungan
dicoba bolehkan hehhe
makasih untuk tutorialnya
:D
saya ijin save kode script na yaw
heheh tar q coba ahhh
:D
@6040604412203318029.0
Monggo mas...
@6564515130728543366.0
Iya mas..
Asyik seh, tp mumet.. hehe..
@2572707910668157721.0
Sama2 mas..
@8728360516456097615.0
Semoga berhasil ya mas..
@7006799629182926021.0
Terimakasih ats kunjungan nya..
@2484532955557645491.0
Monggo mas..
@5340332500718493280.0
ya boleh lah mas..
masa boleh dong.. hehe..
@6643102971593390867.0
Monggo mas..
mw diapain jg boleh ko.. hehe
Waduh2 mas puyeng liat code sebnyak itu..tp bermanfaat mas bwt nambh ilmu ngeblog
Wah klo pake Di Start dulu mah bisa banyak yg komplein Ngliat banner'y ga ad Sob hhe......Kayanya ada tab View yg bisa langsung jalan Sob...aku lupa tutornya dimana dulu aku pernah ngikutin waktu bikin Slide berita kaya di detik untuk blogku yg satu lagi hhe.........
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
Wah klo pake Di Start dulu mah bisa banyak yg komplein Ngliat banner'y ga ad Sob hhe......Kayanya ada tab View yg bisa langsung jalan Sob...aku lupa tutornya dimana dulu aku pernah ngikutin waktu bikin Slide berita kaya di detik untuk blogku yg satu lagi hhe.........
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
Wah klo pake Di Start dulu mah bisa banyak yg komplein Ngliat banner'y ga ad Sob hhe......Kayanya ada tab View yg bisa langsung jalan Sob...aku lupa tutornya dimana dulu aku pernah ngikutin waktu bikin Slide berita kaya di detik untuk blogku yg satu lagi hhe.........
Sebelumnya maaf aku baru berkunjung Sob...Sukses slalu!!!
@6643275927345866509.0
Iya neg mas..
ane jg dah mumet.. hehe..
@1743845071169747009.0
Walah.. banyak kali mas kommentsnya.. hehe..
iya mw nya seh gtu mas.. cmn ya berhubung baru bisa bikin nya yg seperti itu mas..
Harap dimaklum ya mas..
makasih banyak ya mas bt apresiasinya..
waduh makin keren aja ni thax bro tipsnya
Kira2 kalo di buka lewat HP bisa nggak mas..?
Soale beberapa model "slide show" nggak bisa di akses lewat ponsel...
mohon infone....
mantaaf nyo...!!!
ini kunjungan pertama saya..elegean bos blognya...mantap....
kalau pak liek senangnya liat demo masak .... yang masak cantik2 dan dapat mencicipi hasil masakannya lagi ... lumayan kan untuk pengiritan keuangan pada masalah perut ....
makasih sharingnya untuk slide show ...
berkunjung mau ngopy codenya
terima kasih
Siank Sob...aku mampir m'neh..... Met akhir pekan Nggeh Sob.....happy blogging........
puyeng mas ngliat scriptnya... hehe...
ijin copy 'n save scriptnya y, tar mau aku plajari
mantep mas, puanjang bgt, ruwet lg, kira2 bwt blog aku bs gak ya mas?
sygnya slidenya gak lngsung jln sendiri y mas? musti pake star
@8703677855993068823.0
Makasih..
@53776148839689567.0
Ah masa sih mas..
jelek gini blog ane mah..
@83187205831644855.0
Yg cantik2 mah jngn diliatin mlu tw pak liek..
ntar kesenengan mereka.. hehe..
@5199407994486503848.0
Nggeh mas..
met wiken jg ya..
@598517053666602694.0
Jangan diliatin mllu mas..
Ntar jd malu dech script2 nya.. hehe..
@8085439442311249633.0
Wah monggo2 mas..
low ada penemuan baru kasih w ane ya mas..
@2937787317964686172.0
Iya mas..
Maklum ane masih belajar mas..
keren keren tipsnya
eh btw ganti casing lagi yah blognys ^___^
Kunjungan kawan.
Slide show tips yang mak nyus
sob ane juga waktu instal PB juga gitu eh ternyata yg diinstal tu clientnya yang ukurannya 447 MB tu.!!
malam bro.....
btw klo coklat hitam silverqueen ada bro
@67308477633654810.0
Kalo itu mah banyak kale mas..
jd maksudnya coklat seperti itu toh??
@8067482654100880490.0
tes
@4822005769764782742.0
tes
banner itu kan ada link-nya, linknya kta masuki kemana? apa langsung ganti tulisan image itu tanpa ngemasukin link gambar bannernya kemana kek gt..?
@6887712289530102138.0 aku pake scroll aja dulu untuk sementara.. ntar kalo kamu udah dapet tutor yang slide auto nya..aku coba deh
tes