Runing text animasi di blog

Cara Membuat runing text animasi di blog. Cara ini untuk membuat blog kita lebih tampak menarik 
Untuk sobat yang ingin membuat cara ini, silahkan sobat mengikuti langkah - langkah di bawah ini :
pertama - tama sobat masuk ke Dasbor > Tata Letak > pilih HTML/Javascript.
Copy paste Javascript di bawah ini ke dalam box penambahan widget (HTML/Javascript). dan save

<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="Bos - bos jangan talalu serius kwa mo baca ini, ini cuma sekedar numpang lewat biar agak refreshing dunk dorang bilang to !!..btw selamat jalan... eghhh selamat datang pa JeSKa pe blog ne..dudu sdiki dulu kwa jangan dulu pigi soalnya kita baru mo beking akang kopi tre pangana... mo pake susu??!!no kalo bagitu tunggu rabu - rabu dunk kita mo piramas tuh anjing pe toto sapa tau masih ada sisa susu, soalnya kwa tadi so ada yang lebe dulu minta susu sebelum ngana...oke deh... met kenal negh btw kita no tu owner ato dorang bilang admin di blog sini... kalo brikut mo datang ulang, bawa anjing sandiri jo dari rumah for mo perah depe susu ne....hati - hati dijalan supaya nda cepat berpulang kerumah bapa di sorga.... GBU regrets JeSKa . . . . . . . . . . @copyright jeska 2012 rexroom.blogspot.com"
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>

Buka Blog sobat dan Lihat hasilnya.

Setelah kode html dan javascript di copy, silahkan langsung di coba dulu dan jangan lakukan perubahan apapun! Coba lakukan penambahan widget di bagian header yang ruangnya cukup lebar. Bisa juga lakukan melalui penambahan widget di bawah halaman posting blog atau di atas footer.

  

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

Related Post: