Cara Membuat Teks Animasi Ganda

Coba sobat blogger mania pemula yang masih seperti EFA ini perhatikan pada tulisan marquee yang ada dibawah header, sangat lumayan bukan untuk memperindah tampilan blog, nah untuk itu EFA akan mencoba memposting artikel tentang Cara Membuat Teks Animasi Ganda untuk membuatnya pun cukup mudah dan simple kalau sobat blogger mania berminat untuk membuatnya. ikuti saja langkah demi langkah berikut ini:

1. Login: Login to BloGGeR (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 sampeyan ada di halaman "Page Element/Elemen Laman". KLIK "Tambah Gadget (Add Gadget)".
4. Widget: KLIK "HTML/Javascript". Tunggu beberapa saat.
5. HTML/Javascript: Copy paste Javascript ke dalam box penambahan widget (HTML/Javascript).
6. SAVE/Simpan: KLIK "SAVE/Simpan".
7. Buka Blog (Open Blog): Lihat hasilnya dengan membuka blog sampeyan.
8. 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

  
  begitu aja gampang kan........nah selamat mencoba semoga bermanfaat.......tetap berkreasi
Salam Bloggerrrrrrrr..............

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «