Cara Menciptakan Teks Pengaruh Menyerupai Diketik (Typing Ticker) Di Blog

Cara Membuat Teks Efek Seperti Diketik (Typing Ticker)

Typing ticker merupakan news ticker yang muncul abjad demi abjad dengan dampak menyerupai diketik, misalnya menyerupai dibawah ini :

Demo Typing Ticker

Cara membuatnya sebagai berikut :

• Login ke Blogger.com
• Pada sajian sebelah kiri, pilih Tata Letak
• Klik/pilih Tambah Gadget
• Lalu klik/pilih HTML/Javascript
• Copy & Paste code dibawah ini pada kotak Konten
<form name="news"> <textarea style="border: none; overflow: auto;" cols="100" name="news2" rows="2" wrap="virtual"></textarea></form> <script type="text/javascript"> //<![CDATA[ var newsText = new Array(); newsText[0] = "Teks-1"; //Ganti teks-1 s.d teks-6, sesuai harapan newsText[1] = "Teks-2"; newsText[2] = "Teks-3"; //Jika dirasa kurang newsText[3] = "Teks-4"; newsText[4] = "Teks-5"; //anda dapat menambahnya sesuai nomor urut selanjutnya newsText[5] = "Teks-6"; var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False) var tspeed = 250; // 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> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' /> jquery code : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' />

Untuk jquery mungkin sudah ada pada template web yang anda gunakan, copy & paste kalau belum ada

• Klik Save

Selanjutnya yaitu kiprah agan mengganti Teks-1 s/d Teks-6 sesuai harapan agan

Catatan :
Penulisan teks yang menyertakan bab code html dapat menyebabkan script tidak berfungsi, teladan menyerupai penulisan disini untuk parse code.

Berbagi :