Cara Membuat Teks Efek Seperti Diketik (Typing Ticker) di Blog

Maret 13, 2020

Cara Membuat Teks Efek Seperti Diketik (Typing Ticker)

Typing ticker merupakan news ticker yang muncul huruf demi huruf dengan efek seperti diketik, contohnya seperti dibawah ini :

Demo Typing Ticker

Cara membuatnya sebagai berikut :

Login ke Blogger.com
Pada menu 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">Solution ngNET</textarea></form>
 <script type="text/javascript">
 //<![CDATA[
 var newsText = new Array();
 newsText[0] = "Teks-1"; //Ganti teks-1 s.d teks-6, sesuai keinginan
 newsText[1] = "Teks-2";
 newsText[2] = "Teks-3"; //Jika dirasa kurang
 newsText[3] = "Teks-4"; 
 newsText[4] = "Teks-5"; //anda bisa 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' />

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

Klik Save

Selanjutnya adalah tugas agan mengganti Teks-1 s/d Teks-6 sesuai keinginan agan

Catatan :
Penulisan teks yang menyertakan bagian code html bisa menyebabkan script tidak berfungsi, contoh seperti penulisan Al-Qur'an dengan tanda kutip (') harus diganti ' atau diparse dan klik disini untuk parse code.

Cari Blog Ini

Cara Pikun