Membuat Efek Typing Text

Membuat Efek Typing Text

Efek Tulisan di Blog - Ada banyak cara dalam membuat atau menandai tulisan penting dalam sebuah artikel, bisa dengan membuat text area, mempertebal tulisan, memberi garis bawah, memberi efek typing text, memberi efek scroll down dan masih banyak lagi.  Dalam kesempatan ini saya akan berbagi cara untuk membuat teks seperti kita sedang mengetik atau mungkin lebih di kenal dengan Typing Text.

Meskipun sama-sama bergerak, tapi efek ini tidak sama dengan efek tulisan yang kita buat menggunakan marquee. Untuk lebih jelasnya silahkan lihat preview dibawah ini :

preview

Silahkan isi dengan teks yang diinginkan . . . . .

Silahkan isi dengan teks yang diinginkan . . . . .

Preview diatas adalah contoh singkat tampilan efek typing text. Jika kalian berminat, tidak perlu meng-edit template. Cukup copy kode dibawah ini dan letakkan di dalam widget (HTML/Javascript) atau dalam artikel (bagian HTML bukan COMPOSE).

Html Code

<script type="text/javascript" src="https://googledrive.com/host/0BwlVU1_5kLcNMzRHTkFiTjJMX0E"></script>
<div id="example1">

Silahkan isi dengan teks yang diinginkan . . . . .

</div>
<p id="example2">

Silahkan isi dengan teks yang diinginkan . . . . .</p>

<script type="text/javascript">
//Define first typing example:
new TypingText(document.getElementById("example1"));
//Define second typing example (use "slashing" cursor at the end):
new TypingText(document.getElementById("example2"), 100, function(i){ var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; });
//Type out examples:
TypingText.runAll();
</script>
<script>
<!--
document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x54\x79\x70\x69\x6E\x67\x20\x54\x65\x78\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x20\x42\x6C\x6F\x67\x73\x70\x6F\x74\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
//-->
<!-- effect text kios-tutorial.tk -->
</script>

• Ganti tulisan yang berwarna merah dengan teks yang diinginkan

Sampai disini dulu tips dari kios-tutorial, sampai jumpa pada tutorial-tutorial berikutnya.

Terima kasih sudah berkunjung dan meluangkan waktu untuk membaca artikel

Membuat Efek Typing Text

Tutorial Tips & Trik Photoshop | Illustrator | Cinema 4D | Blog & Seo