vgy
Membuat Gallery Slideshow Dengan Javascript
Written By Ufad on Sabtu, 08 Januari 2011 | 20:17
Nah bagi kalian Pecinta Multimedia yang ini cocok sekali untuk Blog anda,, Kali ini Saya akan menjelaskan cara pembuatan Gallery Slideshow Dengan Javascript,







Langsung saja ke proses pembuatan


Langkah Pembuatan :

1. Masuk Ke akun Blogger Anda
2. Klik Rancangan Pilih Edit Html
3. Cari Kode
4. Lalu Copy Paste Kode Dibawah Ini Dan Letakan Tepat diatas kode








ket : Angka yang berwarna biru adalah ukuran permanen gambar, anda dapat menggantinya sesuai dengan ukuran tata letak web anda.

5. Klik Save
6. Selanjutnya klik Rancangan klik Tambah Gadget
7. Pilih HTML/Javascript lalu masukan script kode dibawah ini

• 
• 
• 
• 

Huruf yang berwarna Merah dapat anda ganti dengan alamat URL gambar anda
Huruf yang berwarna Hijau dapat anda ganti sesuai keterangan gambar

8. Klik Save
9. Dan Lihat hasilnya

kode java ikan di aquarium

<div align="center"><embed src="http://widget.bigoo.ws/generators/aquarium/show.swf?f1=1&f2=1&f3=1&f4=1&f5=1&w=460&h=349&b=70&a=20&t=5&v=100" quality="high" bgcolor="#ffffff" width="460" height="349" name="show" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br /><small><a href="http://www.bigoo.ws/generator">Aquarium Generator</a></small></embed></div>

Pilih kode ini satu-satu, dan lihat hasilnya dibawah

<marquee behavior=”scroll” direction=”left”>

<img src=”image.jpg” width=”1000″ height=”100″ alt=”” />

<p> ANDA BERUNTUNG MENJADI PENGIKUT YESUS KRISTUS, SEBAB KESELAMATAN ANDA DIJAMIN 100% MASUK SURGA </p>

</marquee>

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Janji pasti tergenapi<br />Amen</center></marquee>

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Janji pasti tergenapi<br />Amen</center></marquee>

<marquee behavior="alternate"><marquee width="150">Firman-Mu mengubahkanku</marquee></marquee>

<marquee style="border:BLUE 2px SOLID">Firman-Mu pelitaku</marquee>

<marquee behavior="alternate" width="10%">>></marquee>Yesus jawaban hidupku<marquee behavior="alternate" width="10%"></marquee>

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Anda harus takut akan Tuhan</marquee></marquee>

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Anda harus takut akan Tuhan</marquee></marquee>

<marquee direction="up" behavior="alternate">Anda masih punya pengharapan di dalam Yesus Kristus</marquee>

<marquee direction="down">Yesus Kristus mengasihi anda</marquee>

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Janji pasti tergenapi<br />Amen</center></marquee>

kode java

KODE SELAMAT DATANG

<div align="left" style="text-align: center; width: 400px;"><embed src="http://images.coolspacetricks.com/images/flash/ticker/ticker.swf?bgcolor=000000&fontcolor=FF0000&circlescolor=333333&t=SELAMAT DATANG DI BLOG INI(BY KRISTALON SINAGA)" quality="high" bgcolor="#000000" width="997" height="50" name="ticker" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed><br /></div>

KODE TEKS BERJALAN

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="black" width="450px"> Yohanes 3:16 " Karena begitu besar kasih Allah akan dunia ini, sehingga Ia telah mengaruniakan anak-Nya yang tunggal supaya setiap orang percaya kepada-Nya tidak binasa melainkan beroleh hidup yang kekal. </marquee></font>

KODE BINTANG BERJATUHAN

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js" type="text/javascript"></script>

KODE JAVA ALKITAB SABDA

<center><a href="http://alkitab.sabda.org"><img src="http://alkitab.sabda.org/images/logo_sa.gif" border="0" width="160" /></a><br />

<table style="font-family: Verdana,Arial,sans-serif; font-size:12px;">

<tr><td>Ketik kata atau ayat:</td></tr><tr><td>

<form action="http://alkitab.sabda.org/searchbox.php" target="_blank">

<input name="w" type="hidden" id="w" value="yourWebsiteName"/>

<input name="wd" type="hidden" id="wd" value=""/>

<script language="JavaScript" type="text/javascript"><!--

document.getElementById("wd").value = window.location.hostname;

//--></script>

<input type="text" size="13" value="" name="s" title="Anda dapat memasukkan: ayat (mis.: Yoh 3; Yoh 3:16; Yoh 3:16-21), kata (mis.: Nikodemus), frasa (mis.: &#34;Yesus Kristus&#34;), nomor Strong (mis.: 25)"/> <input type="submit" value="Cari" onclick="this.form.target=_blank; return true;"/><br /><input type="radio" name="type" value="bible" checked /> Alkitab  <input type="radio" name="type" value="resource" /> Bahan<br />

</form></td></tr></table></center>

KODE ANIMASI BOLA-BOLA

<canvas height="400" id="semburan" width="650"></canvas>

<script type="text/javascript">

//Membuat variable dan mulai menentukan jari-jari bola

  var line = {

      x: 400,

      y: 0,

      length: 100,

      angle: 0

    };

//Memfungsikan dengan this yang nantinya akan di panggil di translate.

    function Ball(x, y, r) {

      this.x = 300;

      this.y = 400;

      this.r = 25;

      this.vx = 300;

      this.vy = 300;

      Ball.all.push(this);

    }

//Menggambar seluruh bola dan menetapkan panjang.

    Ball.all = [];

    Ball.draw_all = function() {

      var i = Ball.all.length;

      while (i--) {

        Ball.all[i].draw();

      }

    };

//mulai memanggil this yang sudah di berikan, Seperti terlihat di ctx.translate.

    Ball.prototype = {

      draw: function() {

        ctx.save();

          ctx.translate(this.x, this.y, this.vx, this.vy, this.vx);

          ctx.fillStyle = "red";

          ctx.beginPath();

//Menggambar lingkaran dengan metode arcs.

       ctx.arc(0, 0, this.r, 0, Math.PI * 2, true);       

          ctx.closePath();

          ctx.fill();

        ctx.restore();     

      },

//memindahkan function lalu mengindex seluruh bola.

      remove: function() {

        Ball.all.splice(Ball.all.indexOf(this), 1);

      }

    };

//menentukan id yang akan di panggil dalam bidang canvas HTML5

var canvas = document.getElementById("semburan");

    var ctx = canvas.getContext('2d');

    setInterval(function() {

      ctx.save();

        ctx.fillStyle = "#f5f5f5";

        ctx.fillRect(0, 0,800,400);

      ctx.restore();

//Mulai menganimasi berapa banyak bola dan penentuan coordinate    

      line.angle += (Math.PI * 2) / 20;

      var x = line.x + line.length * Math.cos(line.angle);

      var y = line.y + line.length * Math.cos(line.angle);

      if (Ball.all.length < 100) {

        for (var i = 0; i < 5; i++) {

          var ball = new Ball(x, y, 2);

          var random_offset = Math.random() * 1 - .5;

          var speed = Math.random() * 15 + 3;

          ball.vx = speed * Math.cos(line.angle + random_offset);

          ball.vy = speed * Math.sin(line.angle + random_offset);

         

        }

      }

           

      var i = Ball.all.length;

      while(i--) {

        var ball = Ball.all[i];

        ball.x += ball.vx;

        ball.y += ball.vy;

        ball.vy += .2;

        ball.vx *= 1;

        ball.vy *= .99;

        if (ball.x % 800 !== ball.x) {

          ball.remove();

        }

        else if (ball.y >= 130) {

          ball.vy = -Math.abs(ball.vy);

          ball.vy *= 1;

          if (Math.abs(ball.vy) < 1 && Math.abs(ball.vx) < 1) {

            ball.remove();

          }

        }

      }

//Melakukan metode save dan restore, perlu di perhatikan di sini yaitu moveto

//lineto yang memberikan nilai line.x. line.y sobat bisa memodifikasinya sendiri

        ctx.save();

        ctx.beginPath();

        ctx.moveTo(line.x, line.y);

        ctx.lineTo(x, y);

        ctx.fill();

      ctx.restore();

      Ball.draw_all();

     

    }, 1000 / 77);

</script>

Kode java; <table border=”1″ width=”341″ cellpadding=”1″ height=”260″>

<tr>

<td align=”right”>

<marquee direction=”up” onmouseover=”this.stop()” width=”332″ onmouseout=”this.start()” scrollamount=”2″ height=”250″>

<ul>

<li><a href=’http://www.seby-antoe.com/2009/09/cara-back-up-dan-upload-file-java.html’ target=”_blank”>Cara Back Up dan Upload File Java Script ke Free Hosting</a></li>

<li><a href=’http://www.seby-antoe.com/2009/09/cara-membuat-animasi-status-loading.html’ target=”_blank”>Cara Membuat Animasi Status Loading</a></li>

<li><a href=’http://www.seby-antoe.com/2009/07/cara-membuat-buku-tamu-dengan.html’ target=”_blank”>Cara Membuat Buku Tamu dengan Shoutmix.com</a></li>

<li><a href=’http://www.seby-antoe.com/2009/06/cara-membuat-dan-memahami-isi-blog-di.html’ target=”_blank”>Cara Membuat dan Memahami Isi Blog di Blogspot</a></li>

<li><a href=’http://www.seby-antoe.com/2009/08/cara-membuat-icon-address-bar-favicon.html’ target=”_blank”>Cara Membuat Icon Address bar ( Favicon ) di Blog</a></li>

<li><a href=’http://www.seby-antoe.com/2009/09/cara-membuat-kata-penutup-di-blog.html’ target=”_blank”>Cara Membuat Kata Penutup di Blog Ketika Menutup Blog</a></li>

<li><a href=’http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya.html’ target=”_blank”>Cara Menampilkan Elemen Halaman Hanya Pada Halaman Depan</a></li>

<li><a href=’http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya_28.html’ target=”_blank”>Cara Menampilkan Elemen Halaman Hanya Pada Halaman Selanjutnya</a></li>

<li><a href=’http://www.seby-antoe.com/2009/07/cara-mudah-menulis-kode-html-di.html’ target=”_blank”>Cara Menulis Kode HTML di Postingan</a></li>

</ul>

</marquee>

</td>

</tr>

</table>

Kode java: <table border="1" width="341" cellpadding="1" height="260">

<tr>

<td align="right">

<marquee direction="up" onmouseover="this.stop()" width="332" onmouseout="this.start()" scrollamount="2" height="250">

<ul>

<li><a href='http://www.seby-antoe.com/2009/09/cara-back-up-dan-upload-file-java.html' target="_blank">Cara Back Up dan Upload File Java Script ke Free Hosting</a></li>

<li><a href='http://www.seby-antoe.com/2009/09/cara-membuat-animasi-status-loading.html' target="_blank">Cara Membuat Animasi Status Loading</a></li>

<li><a href='http://www.seby-antoe.com/2009/07/cara-membuat-buku-tamu-dengan.html' target="_blank">Cara Membuat Buku Tamu dengan Shoutmix.com</a></li>

<li><a href='http://www.seby-antoe.com/2009/06/cara-membuat-dan-memahami-isi-blog-di.html' target="_blank">Cara Membuat dan Memahami Isi Blog di Blogspot</a></li>

<li><a href='http://www.seby-antoe.com/2009/08/cara-membuat-icon-address-bar-favicon.html' target="_blank">Cara Membuat Icon Address bar ( Favicon ) di Blog</a></li>

<li><a href='http://www.seby-antoe.com/2009/09/cara-membuat-kata-penutup-di-blog.html' target="_blank">Cara Membuat Kata Penutup di Blog Ketika Menutup Blog</a></li>

<li><a href='http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya.html' target="_blank">Cara Menampilkan Elemen Halaman Hanya Pada Halaman Depan</a></li>

<li><a href='http://www.seby-antoe.com/2009/07/cara-menampilkan-elemen-halaman-hanya_28.html' target="_blank">Cara Menampilkan Elemen Halaman Hanya Pada Halaman Selanjutnya</a></li>

<li><a href='http://www.seby-antoe.com/2009/07/cara-mudah-menulis-kode-html-di.html' target="_blank">Cara Menulis Kode HTML di Postingan</a></li>

</ul>

</marquee>

</td>

</tr>

</table>

<marquee behavior=”scroll” direction=”left”>
<img src=”image.jpg” width=”1000″ height=”100″ alt=”” />
<p> ANDA BERUNTUNG MENJADI PENGIKUT YESUS KRISTUS, SEBAB KESELAMATAN ANDA DIJAMIN 100% MASUK SURGA </p>
</marquee>

kode javascritpt Jam

<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>Janji pasti tergenapi<br />Amen</center></marquee>