Membuat IMAGE SLIDESHOW di Blog

Satu lagu trik pembuatan image slide show. Kali ini dengan mengunakan 6 jenis file java script dan satu file css.
Kemungkinannya, loading blog akan menjadi agak berat sebab harus berhubungan dengan tempat penyimpanan file js tersebut.
Namun walaupun begitu tidak ada salahnya anda mencoba trik ini, karena penampilannya lumayan bagus, juga dapat menghemat ruang pada blog.
Demo : Lihat disini

Caranya :

LANGKAH PERTAMA

1. Masuk ke Blogger dengan ID anda
2. Pilih Tata Letak
3. Pilih Edit HTML
4. Cari kode </head> pada template blog anda
5. Copy script dibawah ini kemudian paste diatasnya
   
   
   <link href='http://sites.google.com/site/epgstudiosite/javascript/backboxedit.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/prototype.compressed.js' type='text/javascript'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/scriptaculous.js' type='text/javascript'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/lightbox.js' type='text/javascript'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/dhtmlHistory.js' type='text/javascript'/>
<script src='http://sites.google.com/site/epgstudiosite/javascript/customsignsheader.js' type='text/javascript'/>
6. Selanjutnya,cari kode </body> pada template anda , kemudian copy script dibawah ini dan paste diatasnya.
   <script src='http://sites.google.com/site/epgstudiosite/javascript/customsignsfooter.js' type='text/javascript'/>
7. Klik Tombol Simpan Template

LANGKAH KEDUA

• Langkah ini boleh anda terapkan pada postingan maupun pada elemen halaman
• Untuk menampilkan gambar slide show, anda harus membuat kode seperti dibawah ini :
  
  
  <div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="http://img443.imageshack.us/img443/994/babyhand.jpg" rel="lightbox[slide]" caption="Pemandangan">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/dc/Brunei_-_Masjid_Sultan_Omar_Ali_Saifuddin.jpg" alt="Mesjid" width="200" height="175" border="0" /></a>
</div>
<a href="http://img443.imageshack.us/img443/7170/sunseti.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="http://img443.imageshack.us/img443/2774/desertk.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="http://img443.imageshack.us/img443/8595/beech.jpg" rel="lightbox[slide]" caption="Waterfall"></a><div>
• Gantilah kode yang berwarna merah dengan alamat gambar yang ingin anda tampilkan dan yang berwarna biru dengan judul gambar yang akan tampil nantinya

Source : http://epg-studio.blogspot.com/2010/02/image-slideshow.html