Membuat Teks Posting Mengalir ; Teks muncul berurutan

Membuat teks posting muncul secara berurutan seperti layaknya "orang mengetik" mungkin akan menjadi variasi tersendiri untuk menarik pembaca. Pada saat bersamaan dengan penerapan fungsi "Teks Mengalir" ini, sekaligus kita juga akan mengisi halaman blog kita dengan suatu "kalimat sambutan" bagi pengunjung blog, yang bisa berupa ucapan terima kasih dan ucapan selamat datang. Ini mutlak harus dilakukan karena berfungsi mendukung terwujudnya bentuk posting teks mengalir. Cara untuk melakukan proses ini sebenarnya tidak terlalu rumit, namun membutuhkan ketelitian. Monggo… Sebelum memulai membuat tampilan baru ini, saya mengucapkan " Selamat berkarya", semoga tidak ada kesulitan yang di temui serta semoga hari yang indah dan kesuksesan selalu menyertai hidup anda!!!

Langkah yang harus dilakukan :

1. Copy java script di bawah ini dan upload ke hosting anda.

/*

An object-oriented Typing Text script, to allow for multiple instances.

A script that causes any text inside any text element to be "typed out", one letter at a time. Note that any HTML tags will not be included in the typed output, to prevent them from causing problems. Tested in Firefox v1.5.0.1, Opera v8.52, Konqueror v3.5.1, and IE v6.

Browsers that do not support this script will simply see the text fully displayed from the start, including any HTML tags.

Functions defined:

TypingText(element, [interval = 100,] [cursor = "",] [finishedCallback = function(){return}]):

Create a new TypingText object around the given element. Optionally

specify a delay between characters of interval milliseconds.

cursor allows users to specify some HTML to be appended to the end of

the string whilst typing. Optionally, can also be a function which

accepts the current text as an argument. This allows the user to

create a "dynamic cursor" which changes depending on the latest character

or the current length of the string.

finishedCallback allows advanced scripters to supply a function

to be executed on finishing. The function must accept no arguments.

TypingText.run():

Run the effect.

static TypingText.runAll():

Run all TypingText-enabled objects on the page.

*/

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();

}

}

2. Kode yang berwarna kuning berfungsi untuk merubah kecepatan aliran teks. Semakin kecil nilainya, maka akan semakin cepat. Begitu juga sebaliknya.

3. Java script ini setelah diupload ke hosting anda, simpan alamatnya (link javascript hasil upload). Catatan : anda bisa upload di ripway.com atau yang lain. untuk upload di ripway tutorialnya silahkan anda cari di blog ini!

4. Login ke Blogger ---> "KLIK" Tata Letak ---> "KLIK" Edit HTML

5. Amankan dulu template anda dengan "KLIK" Download Template Lengkap.

6. Letakkan kode berikut tepat di bawah ]]></b:skin>


<script language="javascript" type="text/javascript" src="alamat upload/TypingText.js">
/* edit ulang oleh harry roy "bloggerstars1"
bloggerstuars.blogspot.com */
</script>

7. Kalau anda anda kesulitan untuk upload silahkan menggunakan link ini sebagai alamat upload javascript (tapi bila menggunakan yang ini, anda tidak akan mungkin untuk merubah kecepatan aliran teksnya).

http://h1.ripway.com/pantekerini/TypingText.js

sehingga bentuk lengkapnya menjadi :

<script language="javascript" type="text/javascript" src="http://h1.ripway.com/pantekerini/TypingText.js">
/* edit ulang oleh harry roy "bloggerstars1"
bloggerstuars.blogspot.com */
</script>

8. "Klik" SIMPAN TEMPLATE/SAVE TEMPLATE.

9. Lanjutkan dengan copy paste kode di bawah dan tempatkan pada HTML/java script dengan masuk ke menu : Elemen Laman ----> HTML/Javascript.

<div id="example1"> Terima Kasih dan Selamat Datang <a href="http://bloggerstuars.blogspot.com/"> bloggerstars1 <a>
</div>
<p id="example2"> Selamat membaca dan menikmati <b> semua yang kami sajikan </b> di dalam blog ini. </b> Semoga bermanfaat dan dapat <br /> sedikit menambah ilmu dan wawasan anda <br> Sekali lagi kami mengucapkan terimakasih!!! </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>

10. "Klik" simpan dan lihat hasil sementara terlebih dahulu!

11. Kode pada point 9 tersebut anda masukkan pada ruang posting pada saat menerbitkan posting anda. Ruang berwarna merah muda di gunakan untuk menulis artikel atau memuat posting. Ruang yang berisi kata "Terima Kasih dan Selamat Datang" digunakan sebagai ruang utama, sedang ruang yang lain silahkan digunakan untuk kata-kata tambahan.