CARA MEMBUAT TEKS ANIMASI PADA BLOG

Sobat Blogger yang ingin membuat teks animasi pada blog anda terutama bagi pemula perhatikan pada tulisan marquee yang ada dibawah header, sangat lumayan bukanuntuk memperindah tampilan blog, nah untuk itu saya akan mencoba mempostingartikel tentang Cara Membuat Teks Animasi  untuk membuatnya pun cukup mudah dan simple kalau sobat blogger berminat untuk membuatnya. ikuti saja langkah demi langkah berikut ini:

1. Login: Login ke Blogger dengan cara menuliskan "User Name/alamat email" dan memasukkan "Pasword (Sandi)". 
2. Dasboard (Dasbor): KLIK link "Layout (Tata Letak)". Tunggu beberapa saat hingga halaman baru terbuka.  
3. Tata Letak (Layout): Saat ini ada di halaman "Page Element/Elemen Laman".
4.  KLIK "Tambah Gadget (Add Gadget)".  
5. Widget: KLIK "HTML/Javascript". Tunggu beberapa saat. 
6. HTML/Javascript: Copy paste Javascript ke dalam box penambahan widget (HTML/Javascript). 
7. SAVE/Simpan: KLIK "SAVE/Simpan". 
8. Buka Blog (Open Blog): Lihat hasilnya dengan membuka blog. Efek Animasi Teks ini sudah di coba di BlogSPOT (blog tempat percobaan) dan tampil sangat menarik, tanpa masalah sedikitpun.  

      Kode HTML dan Javascript Teks Animasi Ganda :

   

<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="welcome to Mr.Beginner blog thank for your visit please give some comments and I will visit yours imediatelly"
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>

Perhatikan supaya tak terjadi kegagalan :

• 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

  
 Selamat mencoba dan terus berkreasi "Salam Blogger"
 Semoga Bermanfaat.