Image Slide Show/gambar bergerak bukan sesuatu yang susah untuk di buat sebenarnya, jika kita perhatikan dan lawati laman-laman blog di internet ini, bermacam-macam cara/teknik orang buat untuk koleksi gambar mereka.
Di dalam internet ini, terdapat banyak laman-laman sesawang yang menawarkan pakej image slide show di laman web mereka, ada yang memerlukan pelawat mendaftar dan ada juga tidak memerlukan pendaftaran. Jom kita lihat, laman web ini memerlukan kita mendaftar dan seterusnya menguruskan foto-foto kita untuk di jadikan slide show, biasanya image slide show yang di tawarkan adalah berbentuk flash, kerana format ini adalah yang terkini setakat penulis tahu, pada peringkat akhir proses mmbuat image slide show tersebut, anda akan di berikan kod untuk di letakkan di laman web/blog. Anda bolehlah meletaknya di bahagian sidebar/atas/tengah /mana-mana bahagian yang di fikirkan perlu, dengan mengedit sdikit pada kodnya supaya sesuai dengan saiz sidebar anda. Seterusnya, saya akan berikan beberapa laman sesawang yang menawarkan khidmat membuat image slide show :-
1. http://www.slide.com
2. Picasa image slide show
3. Pyzam Slide Show
Terdapat juga cara lain untuk membuat image slide show ini, iaitu menggunakan kod-kod yang tertentu. Baiklah di bawah ini penulis akan berikan satu kod yang mudah untuk membuat slide show tesebut.
1. Login ke Blogspot.
2. Pilih Layout - Page Elements
3. Pilih Add Gadget--> Html/JavaScript.
4. Masukkan Kod ini :-
<script language="JavaScript1.2">
/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="PE01803A.gif">'
slideimages[2]='<img src="TN00411A.gif">'
slideimages[3]='<img src="PE02054A.gif">'
slideimages[4]='<img src="cake.gif">'
//extend this list
///////Do not edit pass this line///////////////////////
var ie=document.all
var dom=document.getElementById
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
5. Anda hanya perlu mengubah kod yang berwarna merah sahaja, iaitu dengan menambah foto-foto yang telah anda Upload ke server .
6. Akhir sekali simpan
Selesai...Selamat berjaya!
=====================================================================
Satu permintaan sahabat Hamba Allah, yang bertanyakan cara buat slide gambar seperti dalam blog j-Qaf sulaiman, baiklah...caranya amat senang sekali, sila ikuti langkah-langkah berikut:-
1. Log masuk ke web http://www.uploadhouse.com untuk upload gambar-gambar.
p/s: apabila anda upload gambar-gambar kesini, mereka akan berikan link untuk gambar yang anda masukkan itu..ini penting bagi mengisi kedalam kod yang saya akan bagi lepas ni.
2. isikan link yang anda dapat melalui web tempat anda upload gambar tadi, kedalam kod ini, :-
<div class='widget-content'>
<div class="textwidget"><marquee direction="up" width="200" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="200" align="left">
<a href="http://www.uploadhouse.com/viewfile.php?id=4502940&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img0.uploadhouse.com/fileuploads/4502/4502940-holder-bfaf6503364163b6622f4d489f1f2e2c.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503054&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img4.uploadhouse.com/fileuploads/4503/4503054-holder-b57e6fb5a4146039f5b378ab3b92dab4.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532267&showlnk=0" target="_blank"><img src="http://img7.uploadhouse.com/fileuploads/4532/4532267-holder-60fdb8ca4f1f2e23f577d37b11659407.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502902&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img2.uploadhouse.com/fileuploads/4502/4502902-holder-5d3ca385ef5cf4b6e49b08a8d9aa079f.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502973&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img3.uploadhouse.com/fileuploads/4502/4502973-holder-ae34696c88dd7fdeb64368178d106d35.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4502999&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img9.uploadhouse.com/fileuploads/4502/4502999-holder-ce4c955bca42ccd79b2043f37874f113.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532270&showlnk=0" target="_blank"><img src="http://img0.uploadhouse.com/fileuploads/4532/4532270-holder-47ea53c2ac9bc10c8939894a861ff385.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532280&showlnk=0" target="_blank"><img src="http://img0.uploadhouse.com/fileuploads/4532/4532280-holder-a2f532cfb47ab4be36fb42d8f9238c45.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503157&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img7.uploadhouse.com/fileuploads/4503/4503157-holder-0a58e49497a471d3a800b7e401425070.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503141&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img1.uploadhouse.com/fileuploads/4503/4503141-holder-8a970cfe1c5b725641b33761a0346321.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4503195&showlnk=0" target="_blank"><img border="0" alt="Image Hosted by UploadHouse.com" src="http://img5.uploadhouse.com/fileuploads/4503/4503195-holder-7bde68edcc1c3ab28dfde7fe931be7d4.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532206&showlnk=0" target="_blank"><img src="http://img6.uploadhouse.com/fileuploads/4532/4532206-holder-04ca6462b0d4368b4fdb6351f5092ca9.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532223&showlnk=0" target="_blank"><img src="http://img3.uploadhouse.com/fileuploads/4532/4532223-holder-f927d1f7a5460d0436510b91bc347258.jpg"/></a>
<p><a href="http://www.uploadhouse.com/viewfile.php?id=4532318&showlnk=0" target="_blank"><img src="http://img8.uploadhouse.com/fileuploads/4532/4532318-holder-c995635d18e2c31dc80c7e8c2ae23f85.jpg"/></a>
</p></p></p></p></p></p></p></p></p></p></p></p></p></marquee></div>
</div>
Sila tukar link yang berwarna merah.
1. Login ke Blogspot.
2. Pilih Layout - Page Elements
3. Pilih Add Gadget--> Html/JavaScript.
4. Masukkan Kod tadi.
Semoga berjaya. Sekian
.jpg)
0 comments:
Post a Comment