RSS

Cara Membuat Typing Text / Text Seperti Sedang mengetik

 Typing text adalah sebuah bentuk text yg menggunakan javascript yg membentuk sebuah text efek marque , akan tetapi text marque yang sangat berbeda  text dengan efek berjalan seperti biasanya . Karna bentuk text yang akan di tampilkan adalah sebuah text berjalan tapi dengan efek seperti kita sedang mengetik , Cara membuat typing text / text seperti sedang mengetik cukup mudah karna saya telah menyediakan code yg tinggal kalian copy paste saja.

 Bagaimana bentuk text yang akan di tampilkan silahkan lihat pada Demo . Terus bagaimana cara membuat typing text / text seperti sedang mengetikcara membuat typing text / text seperti sedang mengetik sendiri ?
Ok ikuti langkah Cara membuat typing text sebagai berikut :

1. Login ke akun Blogger
2. klick rancangan HTML / edit template
3. Cari code <head> gunakan "F3" untuk mencari
4. Copy code berikut di atas nya


Code Javascript
Klik show untuk melihat
<script type="text/javascript" src="https://sites.google.com/site/httpalvizcyberblogspotcom/javascript/TipingText.js"></script>

5. Klick save / simpan template
6. Kemudian code berikut dan taruh dimana anda akan meletakan nya , code bisa taruh di widget atau di dalam postingan terserah menurut selera saja.


Klik show untuk melihat

<br />
</b><br />
<div class="notes" id="message">
<b><span style="color: blue;">
Anda<br /> 
sedang membaca<br /> 
tuorial di www.alvizcyber.blogspot.com.<br /> <br />

semoga betah <br /> 
selamat membaca<br /> 
 mohon maaf bila ada salah.<br /> 
karna itu milik kami umat manusia<br /> 

tak luput dari semua itu<br /> 
 <br /> 
segala masukan sangat<br /> 
bermanfaat untuk kami mengoreksi diri, <br />  
 dan dan terimakasih kunjungan nya.<br /> 
suport.
 <br /> <br />


<br />anda,<br />
 membangun,<br />kami untuk.
<br /> <br />
lebih giat<br />Berkarya<br />salam persahabatan. </span> <br /> <br /> 


  
    </b><br />
<b><span style="color: maroon;">.Rocket_jo Stars</span></b><br />
<b><span style="color: maroon;">.www.alvizcyber.blogspot.com </span><span style="color: red;">Tak berguna</span></b><br />
<b><span style="color: maroon;">.Tanpa kalian </span></b><br />
<b><br /></b><br />
<b><br /></b><br />
<b><span style="color: red;">TERIMAKASIH</span> _<br /> <br />Rocket_jo Stars</b></div>
<b>
</b><br />
<div class="notes">
<b><br /></b></div>
<b>
<script type="text/javascript">
/*<![CDATA[*/ 
new TypingText(document.getElementById("message"), 90, function(i){ var ar = new Array("_", " ", "_", " "); return " " + ar[i.length % ar.length]; });

//Type out examples:
TypingText.runAll();
  /*]]>*/
</script> 
</b></div>


Silahkan kembangkan dengan kreasi kalian , warna text dapat di sesuaikan dengan merubah pada <b><span style="color: blue;">

Aatau gunakan code brikut taruh diatas </head>


<SCRIPT LANGUAGE="JavaScript">
var text="your text here";
var delay=10;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</SCRIPT>


Tex berwarna merah adalah text yang akan ditampilkan

Selanjutnya copy dan taruh code berikut melalui tambah gadget.




<div id="textDestination" style=" font: 12px arial; color: #00ff00; margin: 0px;"></div><script language="JavaScript">javascript:startTyping(text, 50, "textDestination");</script>



12px : ukuran text

arial  : jenis text




#00ff00 : warna text

Silahkan sesuaikan dengan kebutuhan , ada baik nya buat dulu text yang akan di tampilkan sebelum di taruh diatas </head>
jika kode tidak berfungsi silahkan taruh javascript diatas </head>

Selamat mencoba

Nb : Jika code tidak bisa di copy silahkan download code di bawah ini !

Lihat juga : Cara Membuat Rating Bintang Otomatis
                              Link download 
Judul: Cara Membuat Typing Text / Text Seperti Sedang mengetik
Rating: 100% based on 10 ratings. 5 user reviews.
Ditulis Oleh ALviz StevaNo

Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Kritik dan Saran sobat dapat sampaikan melalui Kotak komentar dibawah ini.
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Related Posts

3 komentar:

Anonymous said...

gan, cara merubah jenis huruf, sama ukurannya gimana ya?

Alviz Stevano said...

Sory gan ini menggunakan typing text type flat , jadi ukuran text gak bisa di rubah , sebagai tambahan silahkan gunakan code baru yang agan bisa utak atik sendiri mengenai ukuran dan jenis huruf nya

Anonymous said...

tolong bantuin donk gan, bikinin typing text, ane pinginnya yang fontnya kayak notepad (lucida kalau gak salah), jadi terkesan sederhana tapi bagus, plis gan T,T