Cara membuat Auto Acak Slideshow Gambar

Mungkin Anda pernah melihat sebuah Web atau Blog dengan Tampilan Gambar berupa Slide. Baik itu Slide Auto ataupun tidak. Apakah Anda ingin membuat tampilan Slide gambar tersebut agar memberikan kesan yang lebih bagus untuk tampilan Blog Anda. Memang banyak beberapa situs Generator Slide Online yang menyediakan. Tapi, Hasil dari Generator tesebut pasti merujuk ke Link mereka. Karena Sudah lama tidak posting tentang Tutorial Blog. Maka dari itu, pada kesempatan kali ini akan Saya berikan Tutorial nya untuk Anda Bagaimanana Cara membuat Auto Acak Slideshow Gambar dengan menggunakan Javascript.

Tutorial ini Saya dapatkan dari situs Luar, yang sengaja Saya pelajari agar bisa berbagi untuk Anda. Dan cara ini sudah Saya coba untuk Blog Saya yang lain. Bagi Anda yang ingin melihat Demo nya Silahkan kunjungi di sini yang terletak di bagian bawah sebelah kanan.

Ada satu Hal lagi yang perlu Anda ketahui. Dimana, Slideshow ini juga menampilkan Gambar yang disertai dengan Teks keterangan nya. Jadi SlideShow ini sangat Cocok sekali bagi Anda untuk Dokumentasi Gambar Album Anda ataupun gambar lain nya.

Mungkin itulah sedikit uraian dari Saya tentang Tutorial ini. Bagaimana Dengan Anda? Apakah Anda ingin menggunakan, nya?

Kayak penawaran Bisnis aja.hehehe...Ya,udah..Ga mau juga ga apa-apa. Saya cuma Berbagi aja untuk Anda. Semoga Tutorial ini bermamfaat dan berguna untuk Anda. Klo gitu langsung aja ya kelangkah-langkah nya ya.

Berikut Langkah-langkah nya:
Langkah 1:

1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
3. Jangann lupa klik ‘Expand Widget Templates’
4. Cari kode </head>
Letakkan kode dibawah ini diatas Kode pada langkah no.4

<style type='text/css'>

.flashclass{
width: 200px;
border: 2px solid orange;
padding: 2px;
}

.flashclass img{
width: 200px;
height:200px
}

</style>

<script type="text/javascript" src="http://mybloglog.googlecode.com/files/transitionshow.js">

/***********************************************
* Random Transitions Slideshow- by Ahmad Roni (http://ahmad-roni.blogspot.com)
* This notice must stay intact for usage
* Visit My Blogs|D'roni at http://ahmad-roni.blogspot.com/ for full source code
***********************************************/

</script>

Keterangan :

1. Warna Merah adalah ukuran Border Slideshow.
2. Warna Orange adalah ketebalan Boder dan Warna Border, Silahkan Ganti sesuai selera Anda.
3. Warna Hijau adalah Lebar dan Tinggi Gambar Anda.
5. Save Template Anda. Langkah pertama sudah Selesai. Sekarang ikuti langkah berikut nya.

Langkah 2:
Rancangan -> Elemen laman-> “Add a Gadget” -> HTML/JavaScript.
Kemudian masukkan kode dibawah ini :

<script type="text/javascript">

var flashyshow=new flashyslideshow({
wrapperid: "myslideshow",
wrapperclass: "flashclass",
imagearray: [
["Link Gambar Anda.jpg", "Link Target Anda.com", "_new", "Keterangan Dari gambar Anda."],
["Link Gambar Anda.jpg", "Link Target Anda.com", "_new", "Keterangan Dari gambar Anda."],
["Link Gambar Anda.jpg", "Link Target Anda.com", "_new", "Keterangan Dari gambar Anda."],
["Link Gambar Anda.jpg", "Link Target Anda.com", "_new", "Keterangan Dari gambar Anda."]
],
pause: 5000,
transduration: 1000
})

</script>

Keterangan :
Silahkan ganti Pause Durasi yang Warna Orange sesuai keinginan Anda.

Selesai Sudah! Semoga Tutorial yang sederhana bisa bermanfaat dan berguna untuk Anda…

Jika ada yang kurang dimengerti, silahkan tanyakan dengan tinggalkan komentar ya...