Cara membuat efek pelangi pada text

Cara membuat efek pelangi pada text atau tulisan ini merupakan salah satu cara dalam menghias blog agar tampak lebih indah. Efek ini tidak akan membuat blog menjadi lebih berat loadingnya karena hanya sebuah tulisan saja dan hanya menambahkan beberapa kode supaya efek ini bisa berjalan pada blog anda.
Bagi yang suka dan cinta akan menghias blog, cara ini mungkin bermanfaat bagi blog anda supaya semakin tampak indah dipandang.
Langsung saja ke Cara membuat efek pelangi pada text yang caranya bisa anda ikuti dibawah ini:

Langkah pertama:
1. Login ke Blogger dengan id anda jangan pakai id orang lain ya nanti yang punya marah.
2. Klik nama blog yang akan di beri efek pelangi ini
3. Klik Template --> Cadangkan atau pulihkan (untuk membackup template --> Edit Html --> Lanjutkan
4. Cari kode
5. Jika sudah ketemu copy kode di bawah ini dan paste dibawah kode tersebut
<script type="text/javascript">
// <![CDATA[
var speed=100; // speed colours change, 1 second = 1000
var glow=4; // can be set from '0' for no glow, to 10
var raincol=new Array("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099"); // change the colours if you want to
var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link)

/****************************
*    Rainbow Text Effect    *
*(c)2003-12 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var rainbow, raintxt, raincnt=0;
window.onload=function() { if (document.getElementById) {
  var i, rainbeau;
  rainbow=document.getElementById("rainbow");
  raintxt=rainbow.firstChild.nodeValue;
  while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]);
  for (i=0; i<raintxt.length; i++) {
    rainbeau=document.createElement("span");
    rainbeau.setAttribute("id", "rain"+i);
    rainbeau.appendChild(document.createTextNode(raintxt.charAt(i)));
    if (alink) {
      rainbeau.style.cursor="pointer";
      rainbeau.onclick=function() { top.location.href=alink; }
    }
    rainbow.appendChild(rainbeau);
  }
  rainbow=setInterval ("raining()", speed);
}}

function raining() {
  var i, c;
  for (i=0; i<raintxt.length; i++) {
    c=raincol[(i+raincnt)%raincol.length];
    document.getElementById("rain"+i).style.color=c;
    if (glow) document.getElementById("rain"+i).style.textShadow=c+" 0px 0px "+glow+"px";
  }
  raincnt++;
}
// ]]>
</script>
6. Simpan template anda.

Langkah kedua:
Pada saat membuat sebuah postingan untuk membuat efek pelangi pada text ini berjalan, selipkan kode di bawah ini
<span id="rainbow">Letakkan Text Yang Akan Di beri Efek Pelangi Disini</span>
Contoh penerapan kode ini bisa anda lihat disini

Sumber kode: http://www.mf2fm.com/rv/dhtmlrainbow.php
0 Komentar untuk "Cara membuat efek pelangi pada text"