Wednesday, September 30, 2009

Membuat Teks Berjalan di Blog



Membuat Teks Berjalan di Blogspot


Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persisseperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.


Untuk template klasik silahkan ikuti langkah-langkah berikut ini :
  • Sign in di blogger dengan ID Anda
  • Klik menu Template
  • Klik menu Edit HTML
  • Copy seluruh kode HTML lalu paste pada program notepad kemudian simpan di Komputer Anda. Ini bertujuan untuk menjaga apabila terjadi kesalahan dalam proses editting template, Anda masih memiliki kode HTML untuk mengembalikannya ke Tempelate semula
  • Copy kode berikut ini lalu paste di atas kode</head>
  • <script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>
  • Klik tombol Save Template Changes.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :
  1. Sign in di blogger dengan ID Anda
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik Download Full Template, lalu save data tersebut. Ini bertujuan untuk menjaga apabila terjadi kesalahan dalam proses editting template, Anda masih memiliki kode HTML untuk mengembalikannya ke Tempelate semula
  5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
  6. Tunggu beberapa saat sampai proses selesai
  7. Simpan kode berikut di bawah kode</body> ,
    kode ini letaknya berada paling bawah sebelum kode </html>
  8. <script language='javascript'> message = "Tulis text pertama yang ingin muncul disini ^" + "Tulis text kedua disini ^" + "Tulis text ketiga disini ^" + "Tulis text keempat disini ^" scrollSpeed = 130 lineDelay = 0 // Do not change the text below // txt = "" function scrollText(pos) { if (message.charAt(pos) != '^') { txt = txt + message.charAt(pos) status = txt pauze = scrollSpeed } else { pauze = lineDelay txt = "" if (pos == message.length-1) pos = -1 } pos++ setTimeout("scrollText('"+pos+"')",pauze) } scrollText(0) </script>


8. Klik tombol SAVE TEMPLATE



Catatan: Pada Script code di atas terdapat teks yang berwarna orange, teks tersebut dapat Anda ganti dengan tulisan yang Anda inginkan. Misalnya "Welcome To Tanjungpinang" atau apa saja sesuai dengan kebutuhan Anda. Jumlah teks berwarna orange pada contoh di atas terdapat empat baris tulisan, Anda dapat menambahkan jumlah baris tulisan lagi sesuai dengan keinginan Anda.
Kode scrollSpeed = 130. Angka “130″ merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan Anda.

Selamat mencoba...!!!!




2 comments:

  1. saya uda coba bikin sesuai petunjuk..
    kok tetep gg jlan ya?

    lagian sya tidak menemukan tulisan warna orange..
    mohon petunjuknya..
    :D

    ReplyDelete
  2. Terima Kasih atas komen dan Kunjungannya,baiklah sahabat Willy apabila cara di atas tidak bisa digunakan Sahabat Willy dapat menngunakan cara berikut: Kode Teks Bergerak
    Selamat Mencoba :)

    ReplyDelete