Kenapa? jawabanya adalah agar efek typing text tetap berada pada si kotak hitam / teks area tersebut, bila itu di langgar, maka efek typing teks akan muncul pada form di atasnya. bingung? mending coba aja sendiri, anda tinggal buka artikel ini , tekan ctrl + u dan copas aja kodenya..... contoh :
Tampilan di atas adalah gabungan antara teks area untuk typing text effect dan form submit / bottom,Coba anda klik di kotak putihnya, Nah, selain itu dalam satu halaman web hanya boleh ada satu efek yang di pasang...klo di langgar lagi........typing teks ndak bisa jalan seperti yang kita inginkan......
Saya bertemu dengan sebuah situs tutorial javascript yang ajib banget, ini URL nya http://www.dynamicdrive.com/
Di situ saya mendapatkan trik untuk membuat typing teks tanpa form dan bisa di masukan ke dalam widget maupun postingan sebagai contoh buka aja link ini .
Kalau tertarik membuatnya silahkan anda kopas script berikut e dalam postingan atau widget anda :
<script type="text/javascript">Edit bagian yang berwarna merah dengan kata-kata yang anda inginkan.
TypingText = function(element, interval, cursor, finishedCallback) {
if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {
this.running = true; // Never run.
return;
}
this.element = element;
this.finishedCallback = (finishedCallback ? finishedCallback : function() { return; });
this.interval = (typeof interval == "undefined" ? 100 : interval);
this.origText = this.element.innerHTML;
this.unparsedOrigText = this.origText;
this.cursor = (cursor ? cursor : "");
this.currentText = "";
this.currentChar = 0;
this.element.typingText = this;
if(this.element.id == "") this.element.id = "typingtext" + TypingText.currentIndex++;
TypingText.all.push(this);
this.running = false;
this.inTag = false;
this.tagBuffer = "";
this.inHTMLEntity = false;
this.HTMLEntityBuffer = "";
}
TypingText.all = new Array();
TypingText.currentIndex = 0;
TypingText.runAll = function() {
for(var i = 0; i < TypingText.all.length; i++) TypingText.all[i].run();
}
TypingText.prototype.run = function() {
if(this.running) return;
if(typeof this.origText == "undefined") {
setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval); // We haven't finished loading yet. Have patience.
return;
}
if(this.currentText == "") this.element.innerHTML = "";
// this.origText = this.origText.replace(/<([^<])*>/, ""); // Strip HTML from text.
if(this.currentChar < this.origText.length) {
if(this.origText.charAt(this.currentChar) == "<" && !this.inTag) {
this.tagBuffer = "<";
this.inTag = true;
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) {
this.tagBuffer += ">";
this.inTag = false;
this.currentText += this.tagBuffer;
this.currentChar++;
this.run();
return;
} else if(this.inTag) {
this.tagBuffer += this.origText.charAt(this.currentChar);
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == "&" && !this.inHTMLEntity) {
this.HTMLEntityBuffer = "&";
this.inHTMLEntity = true;
this.currentChar++;
this.run();
return;
} else if(this.origText.charAt(this.currentChar) == ";" && this.inHTMLEntity) {
this.HTMLEntityBuffer += ";";
this.inHTMLEntity = false;
this.currentText += this.HTMLEntityBuffer;
this.currentChar++;
this.run();
return;
} else if(this.inHTMLEntity) {
this.HTMLEntityBuffer += this.origText.charAt(this.currentChar);
this.currentChar++;
this.run();
return;
} else {
this.currentText += this.origText.charAt(this.currentChar);
}
this.element.innerHTML = this.currentText;
this.element.innerHTML += (this.currentChar < this.origText.length - 1 ? (typeof this.cursor == "function" ? this.cursor(this.currentText) : this.cursor) : "");
this.currentChar++;
setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval);
} else {
this.currentText = "";
this.currentChar = 0;
this.running = false;
this.finishedCallback();
}
}
</script>
<div id="typing">Taruh teks disini untuk efek pertama<br/>edit bagian ini <br/> kalau pengen lebih ringkas ubah script di atas menjadi eksternal</div>
<script type="text/javascript">
new TypingText(document.getElementById("typing"), 100, function(i){ var ar = new Array("_", "_", "_", "_"); return " " + ar[i.length % ar.length]; });
TypingText.runAll();
</script>
Script ini telah mengalami modifikasi dari awalnya dua baris menjadi satu baris, jadi anda tidak akan menemukan script yang sama dengan tutorial di situs asli maupun milik orang lain.
30 komentar temen:
Oke deh met malem semua......
Wah, gawat nih. Budaya kopas kayaknya semakin memprihatinkan.
MET MALEM MAS. WAAAAAHH, BLOGGER COPAS DONG NAMANYA TUH MAS. HARUS DIBASMI. TAPI GIMANA CARANYA YA?
thanks sharingnya
gimana caranya memberantas copas ya??
tqx tipsnya sahabat
terimakasih tipsnya sahabat
Makasih untuk sharingnya kawand...
heheheheh saya tidak begitu ngerti mas,,,,,tapi bagus sekali mas ini untuk mengantisipasi orang yang dengan seenaknya sendiri ngopas gitu ya mas,,,
Trims tutorialnya tentang membuat typing teks.
Apakah masih banyak yang copy paste tanpa diedit dan tidak mencantumkan link sumber ? Apakah mereka tidak takut terkena 'banned' Google ? Apakah 'banned' sudah tidak berlaku lagi sekarang ini ? Salam sukses.
Iyah, banyak banget yang ngaku-ngaku tutorial bikinan sendiri, padahal copas...
Btw: Blog ane dah terlalu berat buat ditambah javascript, hehehe//
iya stop plagiat hehe stujuhh
blogwalking
YA AMPUN,MASIH ADA AJA YANG MENYERTAKAN KOMENTAR LINK,MENDING KASIH URL SAHABAT AJA,JANGAN DI BUAT LINK,MOHON MAAF BAGI KOMEN SOBAT YANG TERFILTER OTOMATIS KARENA MENGANDUNG LINK,OH YA KAWAN,SATU LAGI,INI BKAN POSTING TTG PENJIPLAKAN TUTORIAL,TAPI CARA MEMBUAT TYPE-TEXT MOHON KOMENY MENYANGKUT TOPIK YAH,HAHAHA
blog mana lagi yg njiplak blogmu mas? klik..
oh, gitu ya bro..
baru tau saya :)
hemmmm...gak ngerti aq hehe
bener mas adit,,ini bagus sekali,dymanicdrive di sana baru saja saya kunjungi karna tau dari blognya mas adit,keren banget memang
Dapat ilmu baru lagi disini... ^_^
Thanks ya.
Maaf tadi nyari buku tamu tak ada disini.
Makasih dah mampir ke tempatku, akun FBku Reni Judhanto
hehe..kelihatannya kok agak susah dikit.trims
salam sobat
trims tutorialnya mas,,
bisa dicoba nich,,java scriptnya.
sebenarnya sih pengen banget pake ,,
tapi takut jadi eror,, nanti aja deh,,
tapi makasih neh,, ilmunya akan saya tampung,,
ilmu itu tidak ada yang sia2 semuanya pasti berguna.
makasih kang adit
dengan tidak mengurangi rasa hormat,,saya membuat postingan untuk mas adit,di blog saya..
maaf komennya tidak sesuai dengan tema postingan...
Wah bagus nih .. thanks untuk infonya.
bisa untuk 1 postingan ya?
aku coba aaaaah
fb keknya udah ku approve semua tadi malem
Saya juga bingung nih,kayaknya artikelnya bukan tentang copas, tapi kok pada komen copas yah..... btw.. saya suka tutorialnya... semangat....
tHanks udh dI share sObat,..,
Mampir disiang bolong .. hehe banyak banget kodenya yah.. but makasih deh siapa tahu ntar perlu.. hehe
wah ketinggalan yg ini sob haha..mantep nech buat di coba sob mudah2an berhasil dah...
sukses sobat!
wah terima kasih kang adit,, ternyata saya sudah hadir,,
WAH WAH... COPASER GENTAYANGAN .. HAHAHA....
Kirim Komentar » Blogger Comment Form