MEMBUAT RUNNING TEXT DI BLOGSPOT DENGAN JAVA SCRIPT

Kali ini saya akan membagi pengalaman sebagai seorang new blogger, pengalaman saya membuat runinng text pada blog. Setelah searching sekian lama akhirnya saya menemukan cara praktis dan bagus untuk blogger pemula mempercantik tampilan sekaligus pesan yang menarik dengan text berjalan pada sebuah blog. Ok langsung saja ke TKP langkah-langkahnya :

1. Login ke blog anda yang saya pakai adalah blogspot
2. Pilih Tata Letak
3. Pilih tombol tambah gadget seperti gambar berikut ini !

 

4.  Pilih HTML / Java Script, lalu akan tampil gambar berikut ini !

5.  Pada bagian Judul boleh diisi dengan Judul Running Teks (bisa juga dikosongkan )
6. Pada bagian konten diisi dengan kode HTML dan Java Script berikut ini :

<div style="padding:5px 20px; border:2px solid blue; font-size:21px; font-family:Cataneo BT;font-weight:bolder;"> <marquee behavior="scroll" direction="left" onmouseover="stop" onmouseout="run" scrollamount="3"> <script type="text/javascript"> var message="Pendidikan mempunyai akar yang pahit, tetapi buahnya manis...| Tidak ada yang selembut dan sekeras hati...| Kerjakanlah lebih dahulu apa yang anda merasa takut untuk melakukannya...| Seekor semut tingginya 6 kaki kalau diukur dengan kakinya sendiri" var bgsGR1color="green" /* Warna utama teks */ var bgsGR2color="red" /* Warna teks flash pertama */ var bgsGR3color="blue" /* Warna teks flash ke dua */ var flashspeed=40 // kec. ganti warna (1/1000 dt) var flashingletters=50 // jumlah teks pertama var flashingletters2=50 // jumlah berwarna teks ke dua var flashpause=30 // waktu jeda pergantian warna (1/1000 dtk) var n=0 if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>')}else document.write(message) function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++) crossref(m).style.color=bgsGR1color} crossref(n).style.color=bgsGR2color if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color if (n<message.length-1) n++ else{n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return}} function beginneon(){if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed)} beginneon() </script></marquee> </div>

7. Setelah efek ganda animasi teks bisa terlihat dan animasi berjalan sempurna, lakukan perubahan pada beberapa kode berikut ini :

font-size:21px	untuk merubah ukuran teks (21px)
border:2px solid blue	Merubah tebal, bentuk dan warna border
font-family:Cataneo BT	Merubah Jenis font
font-weight:bolder	Tebal teks (normal, bold, bolder)
scrollamount="3"	Kecepatan teks berjalan (1 s/d 3)
var bgsGR1color="green"	Warna Teks pertama (warna teks utama)
var bgsGR2color="red"	Warna animasi teks ke dua
var bgsGR3color="blue"	Warna animasi teks ke tiga
var flashspeed=40	Kecepatan perpindahan warna
var flashingletters=50	Jumlah teks beranimasi ke-2
var flashingletters2=50	Jumlah teks beranimasi ke-3
var flashpause=30	Waktu jeda animasi teks

Sekian tuturial kali ini, selamat mencoba semoga berhasil !