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 Ganda :
- 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 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="Gubhug Reyot Mimik Minta Nyedot Rumahnya Reyot Bajunya Copot Celana Kolornya Melorot Matanya Melotot Mau Copot Kepalanya Benjol Gara Gara Kejedot Gigi Bandot Tua Berjenggot Yang Sedang Naik Angkot Disamping Gadis Cantik Yang Pantatnya Pleyat-Pleyot"
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.
- Apabila belum punya elemen penambahan widget di bagian header, silahkan ikuti posting sebelum ini (cara Menambah Elemen Blog di Header). Atau sampeyan bisa juga langsung
- 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 |
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
