Cara Membuat Text Rainbow/Pelangi Seri 2

Seperti yang telah anda ketahui bersama pada " Cara Membuat Text Rainbow/Pelangi Seri 1 ", teks rainbow
atau yang lebih dikenal dengan istilah teks berwarna
pelangi seri 2 (dua) ini tidak kalah menariknya dari seri
yang sebelumnya. Bahkan menurut penilaian pribadi
saya, teks pelangi seri ke 2 (dua) ini lebih lagi terlihat
kerennya. Coba anda lihat contohnya di bawah ini :

SYAMSUDINNAMAKU.BLOGSPOT.COM-MENGUCAPKAN-SELAMAT DATANG, SEMOGA BERKENAN DI HATI ANDA

Atau untuk lebih jelasnya lagi, anda bisa lihat

tulisan yang ada di bagian paling atas blog ini.

Nah, bila anda tertarik ingin mencoba,

cara memasangnya seperti berikut ini :

1.  Rancangan -> Tambah Gadget ->
     Pilih HTML/JavaScript.

2.  Masukkan dalam kontennya, kode
     berikut ini :

<script type="text/javascript">
<!-- Begin
/*
 * Notes on hue
 *
 * This script uses hue rotation in the following manner:
 * hue=0   is red (#FF0000)
 * hue=60  is yellow (#FFFF00)
 * hue=120 is green (#00FF00)
 * hue=180 is cyan (#00FFFF)
 * hue=240 is blue (#0000FF)
 * hue=300 is magenta (#FF00FF)
 * hue=360 is hue=0 (#FF0000)
 *
 * Notes on the script
 *
 * This script should function in any browser that supports document.getElementById
 * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6
 *
 * Accessibility
 *
 * The script does not write the string out, but rather takes it from an existing
 * HTML element. Therefore, users with javascript disabled will not be adverely affected.
 * They just won't get the pretty colors.
 */
/*
 * splits par.firstChild.data into 1 span for each letter
 * ARGUMENTS
 *   span - HTML element containing a text node as the only element
 */
function toSpans(span) {
  var str=span.firstChild.data;
  var a=str.length;
  span.removeChild(span.firstChild);
  for(var i=0; i<a; i++) {
 var theSpan=document.createElement("SPAN");
 theSpan.appendChild(document.createTextNode(str.charAt(i)));
 span.appendChild(theSpan);
  }
}
function RainbowSpan(span, hue, deg, brt, spd, hspd) {
 this.deg=(deg==null?360:Math.abs(deg));
 this.hue=(hue==null?0:Math.abs(hue)%360);
 this.hspd=(hspd==null?3:Math.abs(hspd)%360);
 this.length=span.firstChild.data.length;
 this.span=span;
 this.speed=(spd==null?50:Math.abs(spd));
 this.hInc=this.deg/this.length;
 this.brt=(brt==null?255:Math.abs(brt)%256);
 this.timer=null;
 toSpans(span);
 this.moveRainbow();
}
RainbowSpan.prototype.moveRainbow = function() {
  if(this.hue>359) this.hue-=360;
  var color;
  var b=this.brt;
  var a=this.length;
  var h=this.hue;
  for(var i=0; i<a; i++) {
 if(h>359) h-=360;
 if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
 else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
 else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
 else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
 else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
 else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }
 h+=this.hInc;
 this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
  }
  this.hue+=this.hspd;
}
// End -->
</script>

<div align="center"><b style="font-size: 100%">
<h4 id="r1">TULIS KALIMATNYA DI SINI</h4>
</b></div>
<script type="text/javascript">
var r1=document.getElementById("r1"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
</script>

KETERANGAN :

Tulis kalimat yang anda inginkan
pada kode TULIS KALIMATNYA DI SINI

Ubah "center" menjadi "left" bila anda
menginginkan teks dimulai dari sisi kiri.

Kode "font-size: 100%" adalah untuk menentukan
besar kecilnya huruf yang anda inginkan.

Semoga anda suka, good luck!