Selamat datang di Kios-Tutorial

Membuat Efek Typing Text

Friday, October 24, 20142komentar

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

Share this article :

+ komentar + 2 komentar

October 26, 2014 at 5:52 PM

kok bergeraknya cuma sekali aja sob..? pas d reload ulang baru bergerak lagi

October 26, 2014 at 8:56 PM

maap, iya memang begitu gan . . . .

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger