Skrip Slideshow Conveyor Belt

Panduan bagaimana menyediakan skrip slideshow conveyor belt. Mempamirkan gambar-gambar menggunakan Slideshow stail ini bagus untuk blog jualan online buku-buku atau lain-lain produk misalnya. Boleh jadi satu daya tarikan kepada pengunjung dan pelanggan blog anda.

Skrip diberi ihsan dari http://www.dynamicdrive.com/dynamicindex14.




Sediakan dulu gambar-gambar bagi produk berukuran width=140 dan height=115 (dalam pixels). Ikut panduan Jadikan Gambar Ukuran Thumbnail.

Hoskan gambar dalam mana-mana image hosting, dapatkan pautan hotlinknya.

Salin dan buka skrip berikut menggunakan program Notepad atau lain-lain text editor, paste masukkan pautan gambar ditempat warna biru yang ditunjukkan. Empat gambar yang digunakan dalam panduan ini dihoskan dalam Google Picasa, lihat contoh warna biru alamat URL pautan gambar dari Google Picasa. Paste masukkan alamat URL pautan gambar sendiri ditempat yang sama:

<script type="text/javascript"> /*********************************************** * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Specify the slider's width (in pixels) var sliderwidth="300px" //Specify the slider's height var sliderheight="150px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=3 //configure background color: slidebgcolor="#EAEAEA" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://picasaweb.google.com/lh/photo/xgRoGj2gpA7zsSQp-7pI6g?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXI1f-f0nWdRmyjpvm1r14rjWG_1EpDAGs4NGnyZ18VuCiodhu3uj749HWknCCpBDgaDBBV54YBl15GtY1og7VZ4bCODyGYSoCFLttaHt2R3MbLbnlxynzjmLTr7BhuKQRdBYuVJANYI/s800/dynamicbook1.gif" border=1/></a>' leftrightslide[1]='<a href="http://picasaweb.google.com/lh/photo/lP2fu3-JRUabPVA_UBiDmA?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_J9j5pwHPmppWyxHuV0fC-PpHXGx0FVasq8UBj3eJ7MwS3JYErNxM4TIeSkMw0jq0E9kuYsdaVK6wPKIT4x2GkbnvGcDUeEWB0m1d-3Wgal5DT45v_ODCQCtWQdycW2lvHzar6TXo15Y/s800/dynamicbook2.gif" border=1/></a>' leftrightslide[2]='<a href="http://picasaweb.google.com/lh/photo/FxUpEW0lLxbYY9AdQYvxbQ?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nYE9Q1h6o6c8Bg9-wKq_8beXm81YS6W-UuupIrJjMWb85NtlBM_q2q8Y-74LEXl1K8QCSOpoq9kfxx5dlhZNkdtLsntzTtsjsoa81vmEvZ5I6FSecC-N4XDxFgG2_JQG05PeNb0NFv8/s800/dynamicbook3.gif" border=1/></a>' leftrightslide[3]='<a href="http://picasaweb.google.com/lh/photo/g97l5pBpOk_2tqY2j0jG5Q?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgr7xaiqJmDcl01XlVC-sSRjj7e9s2rx2n-VEFFPmABXYpqpIgXtcXSzPu7KHsTUOlfw2rq6PTtfPHr6vSSLEnSrYPnjbyxkWVCUCxKo1uUijgSQM7XkoS7WP_MrPFV2__QhbF0AOXA9E/s800/dynamicbook4.gif" border=1/></a>' leftrightslide[4]='<a href="http://picasaweb.google.com/lh/photo/2nTdKvl0k7_j6ictSwMv4g?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkxxprEks0QT5WL7GaGuy-R5WpTqUdx2Waw04u4aP2MJaC84CLMjlJ4AnR_fqTLrVeUYW9fueewrmaOp7IdLrH57dFCj0e-EQH8h6NciTGDi-wcqirT_jfd9LJqGWlD4qoqYpmmqRrcpQ/s800/dynamicbook5.gif" border=1/></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=5 ////NO NEED TO EDIT BELOW THIS LINE//////////// var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script>

Paste masukkan skrip di atas dalam pos blog di mana slideshow ingin ditunjukkan.

Jika menggunakan pelayar internet Forefox 3.6.. akan berlaku masalah berikut:

Jika dibuat pada mulanya skrip berfungsi dengan baik berjaya menunjukkan slideshow tetapi bila pos berkenaan diedit kelai keduanya, selepas di save, skrip tidak lagi berfungsi. apa yang perlu dilakukan jika ini terjadi:

1. Semasa melakukan pada edit pos ini salin semula kod skrip untuk slideshow ini dan buka dengan program Notepad untuk sementara.

2. Sempurnakan kerja mengedit pos hingga selesai, hapuskan (delete) skrip dalam pos dan publish post (bermakna slideshow tidak ada lagi dalam pos).

3. Buka atau edit semula pos tadi, jangan buat sebarang kerja-kerja edit kali ini, salin kod skrip yang dibuka dengan program Notepad di atas dan paste masukkan ditempat asalnya dalam pos, DAN TERUS PUBLISH POS tanpa sebarang pindaan lain dalam pos.

4. Skrip slideshow akan berfungsi semula.


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot