Posted by Evan SuhandA

.



evan Blog

Cara membuat animasi teks/double animation di blogs

posted by: irv4n s@ndEr

Cara membuat animasi teks/double animation di blogs

        Yang dimaksud dengan animasi ini  yaitu sebuah tempat untuk menyampaikan pesan atau sesuatu ke pada para pembaca yang akan anda sampaikan yang dihiasi dengan efek teks yang berjalan dan ditaburi warna yang membuat design anda menjadi sedikit menarik, tidak hanya itu anda juga bisa mengganti tampilan warna/kecepatan teks sesuai selera anda yang penting Ente senang hhhhh….!!!
Untuk membuat ini tentunya javascript/html yang kita gunakan yang didalamnya diisi dengan code html, untuk penulisan kodenya Cuma sedikit aja koq….

Apakah anda tertarik ???

Jika anda tertarik membuat animasi ini pada blog anda simak benar-benar toturial saya berikan….

==========  code  htmlnya dibawah ini  =============

<div style="padding:5px 20px; border:2px solid blue; font-size:60px; font-family:Cataneo BT;font-weight:bolder;"><marquee behavior="scroll" direction="left" onmouseover="stop" onmouseout="run" scrollamount="3">
<script type="text/javascript">
var message="Tulis text disini sesuka anda/terima kasih telah berkunjung di sm@rvan Edition and jangan lupa ya untuk meninggalkan komentar-pesan dan saran anda /tukaran link "
var bgsGR1color="red" //
var bgsGR2color="blue" //
var bgsGR3color="green" //
var flashspeed=50 //
var flashingletters=60 //
var flashingletters2=70 //
var flashpause=35 //
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>

Truzz gmna cara bikin nya???
Caranya begini……..!!!
anda hanya mengikuti 5 langkah yang saya berikan.

  1. Yang pasti Anda Login dahulu ke blogger.
  2. Pada menu dasbor pilih-click tata letAk
  3. Kemudian padA menu tata letAk tambahkan page element pada laman  anda dengan  mEng’Click     [ tambah gadget / aDD gAdgEt ]
  4. Setelah andA meng”click pada laman ADD gAdgEt tadi akan muncul Tab baru yang berisi penambah gadget baru KemUdian cari dan click widget HTML/javascript.
  5. Yang terakhir, tulis code diatas tadi kedalam box  HtML/ javascript kemudian Save dan lihat hasilnya……creng-creng jadi bukan!!! Jika Animasi teks andA  tidak tAmpil periksa code HTML/Javascript kemungkinan Ada kesalahan dalam penulisan code Anda.

Ringkasnya : login blogger}dasbor}tata letak} add gadget } widget html/javascript } tulis code }
Keterangan : untuk code/ tulisan yang berwarna biru anda bisa ganti dengan penjelasan seperti di bawah ini..

  • font-size:21px;                          ( untuk         mengganti      ukuran         teks                            Anda       )
  •  var message="                    ( untuk           mengisi          teks            andA                            )
  • var bgsGR1color="red" //     ( untuk mengatur style animasi warna teks         pertama  anda   )
  • var bgsGR2color="blue" //    ( untuk mengatur style   animasi  warna teks          kedua   anda  )
  • var bgsGR3color="green" //  ( untuk  mengatur style  animasi warna  teks       ketiga     anda    )
  • var flashspeed=50 //              ( untuk  mengatur kecepatan pergerakan pada warna    anda      )
  • var flashingletters=60 //          (  untuk  mengatur jumlah animasi teks kedua    anda                    )
  • var flashingletters2=70 //        (  untuk  mengatur jumlah animasi teks ketiga      anda                  )
  • var flashpause=35 //               (  jeda timing       pada       animasi       teks             anda                      )


    === selamat mencoba dan jangan lupa isi komentar/tanggapan anda /terima kasih   ===







0 komentar:

twiter follow

tulisan cursor cycle

black

Thanks To Visit mY BlogS