Membuat Slide Gambar dan Teks sekaligus

Berawal dari kebutuhan, ya semua itu karena kebutuhan seh, hehehe...

slide gimana caranya agar membuat slide teks dan gambar berjalan sekaligus. ilmunya ane dapat dari dynamicdrive, untuk demo ane gunain disini gan..
untuk pengembangan slide dan fungsi lainnya, ane belom coba gan, maklum masih newbie gan. masih banyak belajar script nih. sementara ini dulu yah.

Demo

Penampakannya begini nih:

 Cara nya begini:

1. Log in ke akun blog agan
2. Klik Layout.
3. Add Gadget sesuai posisi dimana yang agan inginkan.
4. Tambah "HTML/JavaScript "
5. Masukkan Kode Berikut:

<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:url('38.gif');
}
div#show4 table td {
background-image:url('40.gif');
}
div#show3 table input,  div#show4 table input {
outline-style:none;
}
</style>

<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=true;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["URL_GAMBAR_1", "ISI_TEKS_1"];
slides[1] = ["URL_GAMBAR_2", "ISI_TEKS_2"];
slides[2] = ["URL_GAMBAR_3", "ISI_TEKS_3"];
slides[3] = ["URL_GAMBAR_4", "ISI_TEKS_4"];
//above slide show uses only the defaults



//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"

</script>

<script src="https://googledrive.com/host/0B4dIDitMRCZodEpCOGtHYlEwbDg" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script  - (c) John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>


<p>
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name.  If Width is used, so must Height.
//Interval is optional too.  It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
</script>
</p>

Keterangan:
teks yang berwarna merah adalah alamat gambar gan. untuk ukuran di usahakan di samain antara gambar 1 sampai 4. untuk warna kuning adalah teks yang ingin ditambahkan sesuai keinginan. pada teks ini jgn di beri "<a href="bla_bla_bla">teks</a>" karena ane udah coba semua fungsinya jadi error. tapi untuk teks style <b>(tebal), <center>(center) masih bisa digunakan.
contoh ane nerapin gebini gan:

slides[0] = ["URL_GAMBAR_1", "<center><b>Teks_a<br/>Teks_b<br/>Teks_c</b></center>"];

teks yang warna Hijau adalah jumlah gambar & teks yang akan di tampilkan, jika ingin menambah begini gan:

slides[4] = ["URL_GAMBAR_5", "ISI_TEKS_5"];

cukup lanjutkan nilai yang ada dalam kurung kotak menjadi 4,5,6,7 dan seterusnya..

       6. Setelah itu di simpan gan. lalu dilihat hasilnya.