Thursday 7 March 2013

Javascript: Typing Text Effect


1. Login ke Dashboard blogger korang.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang korang nak letakkan tweet tersebut.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<form name="news">
<textarea name="news2" cols=50 rows=4 wrap=virtual></textarea>
</form>
<script language="javascript" type="text/javascript">
document.news.news2.style.background = '#FFFFCE';
document.news.news2.style.color = '#ff0000';
var newsText = new Array();
newsText[0] = "LETAK TEKS 1 ANDA DISINI\nNEW LINE";
newsText[1] = "LETAK TEKS 2 ANDA DISINI";
newsText[2] = "LETAK TEKS 3 ANDA DISINI";
newsText[3] = "LETAK TEKS 4 ANDA DISINI";
newsText[4] = "LETAK TEKS 5 ANDA DISINI"
var ttloop = 1;    // Repeat forever? (1 = True; 0 = False)
var tspeed = 50;   // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
  mxText = newsText.length - 1;
  dwAText = newsText[cnews];
  setTimeout("addChar()",1000)
}
function addNews() {
  cnews += 1;
  if (cnews <= mxText) {
    dwAText = newsText[cnews];
    if (dwAText.length != 0) {
      document.news.news2.value = "";
      eline = 0;
      setTimeout("addChar()",tspeed)
    }
  }
}
function addChar() {
  if (eline!=1) {
    if (cchar != dwAText.length) {
      nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
      document.news.news2.value = nmttxt;
      cchar += 1;
      if (cchar != dwAText.length) document.news.news2.value += "_";
    } else {
      cchar = 0;
      eline = 1;
    }
    if (mxText==cnews && eline!=0 && ttloop!=0) {
      cnews = 0; setTimeout("addNews()",tdelay);
    } else setTimeout("addChar()",tspeed);
  } else {
    setTimeout("addNews()",tdelay)
  }
}
doNews()
</script>
##Gantikan:

  • 50 - nilai column (lebar)
  • 4 - nilai row (tinggi)
  • #FFFFCE - warna background
  • #ff0000 - warna teks
  • LETAK TEKS 1/2/3/4/5 ANDA DISINI - Teks atau pesanan anda. (gunakan " \n " untuk new line)
  • - set untuk ulang (1=true , 0=false)
  • 50 - kelajuan efek teks. (semakin besar nilai = semakin perlahan kelajuan)


6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4

7.Seterusnya klik " Save (rujuk no 6 ) " dan lihat la hasilnya...........

2 comments: