Ok kawan, Sekarang
saya akan memberikan tutorial bagaimana caranya kita menampilkan video secara
acak atau random di blog atau website kita. Untuk contohnya kawan-kawan lihat
saja di blog ini, dibawah header terdapat video yang saya tampilkan dari
youtube.com secara acak. Caranya sangat mudah kawan, kita hanya memanfaatkan
javascript untuk melakukan itu, script yang dimanfaatkan yaitu array pada
javascript. Berikut ini kode atau langkah-langkahnya kawan.
Langkah-langkahnya yaitu :
1. Tambah
widget di blogger kita atau kawan-kawan tambah saja di templates, tepatnya
diantara tag <body> dan </body>
2. Pastekan
script berikut ini kawan (script ini
ditaruh jika menambah widget, bukan diantara tag <body>),
<script language='JavaScript'>
videos
= new Array(8);
videos[0]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/MiyFkIGSvhA'
width='520'/>";
videos[1]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/3wHUyvi0rw0'
width='520'/>";
videos[2]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/jjpOcYZTpQ8'
width='520'/>";
videos[3]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/fAa1HZ8dEns'
width='520'/>";
videos[4]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/2kgjkoYFgNw'
width='520'/>";
videos[5]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/_IrLxrQNf64'
width='520'/>";
videos[6]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/z4eredw8_R0'
width='520'/>";
videos[7]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/ys0UB_YBb_k'
width='520'/>";
index
= Math.floor(Math.random() * videos.length);
document.write(videos[index]);
</script>
3. Atau
jika mau ditaruh di bagian tag <body>, maka kawan-kawan wajib menyertakan
tag <b:videos id=’videoku’></b:videos>
Sehingga scriptnya
menjadi
<b:videos id=’videoku’>
<script language='JavaScript'>
videos
= new Array(8);
videos[0]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/MiyFkIGSvhA'
width='520'/>";
videos[1]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/3wHUyvi0rw0'
width='520'/>";
videos[2]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/jjpOcYZTpQ8'
width='520'/>";
videos[3]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/fAa1HZ8dEns'
width='520'/>";
videos[4]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/2kgjkoYFgNw'
width='520'/>";
videos[5]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/_IrLxrQNf64'
width='520'/>";
videos[6]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/z4eredw8_R0'
width='520'/>";
videos[7]
= "<iframe allowfullscreen='allowfullscreen' frameborder='0'
height='300' src='http://www.youtube.com/embed/ys0UB_YBb_k'
width='520'/>";
index
= Math.floor(Math.random() * videos.length);
document.write(videos[index]);
</script>
</b:videos>
4. Finished
dech kawan.....
*note
tanda " teman-teman bisa ganti dengan tanda petik dua (")
*note
tanda " teman-teman bisa ganti dengan tanda petik dua (")
Post a Comment