Selasa, 14 September 2010

Membuat Java Script Ticker

Trik ini Vey dapat setelah melihat blog indose7en yang lebih dahulu menggunakan trik ini. Lalu Vey coba cari trik ini di google dan forum-forum yang biasa Vey kunjungi dan akhirnya Vey menemukannya dan langsung mencoba membuat Java Script Ticker tersebut. Sebenarnya Vey masih bingung nama trik ini apa, karna di beberapa forum ada yang menyebutnya Typing Text Scroller, Scroller Typed Text Area, dan banyak lagi. Tapi dari pada pusing memikirkan hal itu lebih baik kita langsung membahas tentang membuat Java Script Ticker ini.
Jika Sobat belum tahu seperti apa Java Script Ticker itu, Sobat dapat melihat widget Vey yang berada di sebelah kanan artikel ini dengan judul widget Event (jika masih ada :p ). Seperti yang Sobat lihat, text yang terlihat seperti seseorang sedang mengetik pada widget tersebut secara berulang-ulang. Text tersebut tampil dengan kecepatan 50 milisecond dan lalu hilang.
Pada Widget tersebut Vey menggunakan Script yang dapat Sobat Copy di bawah ini
<form name="news">
<textarea name="news2" cols="25" rows="1" wrap="virtual"></textarea>
</form>
<div id="ticker">
<script language="javascript" type="text/javascript">
document.news.news2.style.background = '#000';
document.news.news2.style.color = '#fff';

var newsText = new Array();
newsText[0] = "Java Script Ticker";
newsText[1] = "VeyRuZt.Co.CC";
newsText[2] = "Tutorial blog";
newsText[3] = "mambahas Widget";
newsText[4] = "dan juga CSS"

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>
</div>

  • Untuk tulisan yang berwarna merah, merupakan ukuran dari area tempat text tampil text
  • Sedangkan untuk yang berwarna biru, merupakan text yang akan tampil nantinya di Blog Sobat
  • Dan tulisan yang berwarna hijau, merupakan warna dari tulisan dan background Sobat
Pada newsText[0] text hanya akan muncul sekali. Sedangkan pada newsText[4] tidak terdapat simbol titik koma(;) pada bagian akhir, hal ini menunjukkan bahwa text tersebut adalah akhir dari Java Script Ticker yang akan tampil. Jadi sebaiknya Sobat perhatikan saat Sobat ingin menambahkan atau mengurangi Java Script Ticker yang akan tampil.
Setelah Sobat selesai mengedit, masukkan script di atas di widget HTML/Java Script pada blog Sobat. Agar dapat muncul sebagai Widget

0 komentar:

Posting Komentar

Alexa Traffic Rank

Alexa Site Info

Sponsor

 

© 2009 -VeyRuzt Blog's Diary | Blogger Template Designed by Choen | Using The 1KB Grid | Powered by Blogger