Membuat Teks Animasi

 

Panduan Blogger dan Tutorial BloGGeR tentang animasi teks ini aku yakin akan membuat sampeyan tertarik. Tidak banyak kok, kode yang digunakan. Hanya sejumput javascript yang dibungkus dalam sebuah tag DIV guna membangun bingkainya. Tepat digunakan untuk menyampaikan sesuatu kepada pembaca blog sekaligus penghias blog yang pasti menarik untuk ditampilkan. Atau mungkin akan sampeyan gunakan untuk memberi kata sambutan buat pengunjung? Atau mungkin buat iklan atau kata-kata mutiara yang nantinya akan terlihat mengalir seperti sungai Batanghari dan Kapuas? Hanya teks mengalir saja? Oho .... Tentu saja tidak. Dalam teks yang mengalir ini masih ada animasi lain yang membuat teks dalam bentuk 3 (tiga) warna dan seperti saling berkejaran. Warnanyapun bisa sampeyan rubah sesuai selera. Mau seperti warna daun, boleh. Mau seperti warna laut, boleh. Mau seperti warna pelangi, boleh. Atau bahkan mungkin pingin warna seperti bokong sampeyan? He .... he .... Aha .... Boleh boleh saja. Pokoknya terserah sampeyan, dah! Yang penting pada senang saja!

Cara Membuat Teks Animasi

•     Login: Login to BloGGeR (Login ke BloGGeR) dengan cara menuliskan "User Name/alamat email" dan memasukkan "Pasword (Sandi)".

•     Dasboard (Dasbor): KLIK link "Layout (Tata Letak)". Tunggu beberapa saat hingga halaman baru terbuka.

•     Tata Letak (Layout): Saat ini sampeyan ada di halaman "Page Element/Elemen Laman". KLIK "Tambah Gadget (Add Gadget)".

•     Widget: KLIK "HTML/Javascript". Tunggu beberapa saat.

•     HTML/Javascript: Copy paste Javascript ke dalam box penambahan widget (HTML/Javascript).

•     SAVE/Simpan: KLIK "SAVE/Simpan".

    Buka Blog (Open Blog): Lihat hasilnya dengan membuka blog sampeyan.
    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 red; 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 My Blog Terima Cacian/Makian Yang penting Enjoy...Semoga Bermamfaat"
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>

Semoga Bermamfaat

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site