Cara Membuat Text Animasi Tulisan Berwarna

Pada artikel kali ini saya akan menuliskan panduan cara bikin teks flash (teks animasi flash / tulisan berwarna bergaya flash) yang nantinya bisa teman-teman pasang pada postingan blog (untuk mempercantik tulisan) atau di widget/sidebar (sebagai widget selamat datang yang keren).

Oke Langsung Saja kita mulai :


 Demo Text Flash Animasi Berwarna / Tulisan Flash Animasi Berwarna

Tempat Berbagi Ilmu Untuk Sesama

Nah itulah seperti itulah nanti penampakannya di blog teman. Next ...

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Untuk Di Pasang Pada Postingan Bagi teman-teman yang ingin memasukkan text flash animasi ini pada postingan silakan ikuti langkah berikut:

1. Buat posting baru / Edit postingan yang sudah ada.
2. Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah). Sebelum memasukkan kode script pastikan teman memasukkannya di bagian Edit HTML bukan di Compose (lihat di sebelah kanan atas forum isian posting)
3. Terbitkan Entri (boleh juga dipratinjau dulu)

Untuk Di Pasang Pada Widget Bagi teman-teman yang ingin memasukkan text flash animasi ini pada widget/sidebar silakan ikuti langkah berikut: 1. Klik Tata Letak

2. Klik Tambah Gadget / Add A Gadget

3. Pilih Gadget Html/JavaScript

4. Masukkan kode Text Animasi Tulisan Berwarna di sana. 5. Simpan (kamu juga bisa memindahkan letak widget jam tersebut dengan cara menarik gadget tersebut) Nah itulah langkah yang harus di lakukan.

Kode Script Text / Tulisan Flash Animasi Berwarna

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff;

background: #990099; border: 1px solid #ECEDE8;

box-shadow: inset 0 1px 5px 0 #555; font-family:

Cataneo BT; font-size: 21px; font-weight: bolder;

padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Tempat Berbagi Ilmu Untuk Sesama"
var bgsGR1color="#FFFFFF" /* Warna utama teks */
var bgsGR2color="#FFFF00" /* Warna teks flash pertama */
var bgsGR3color="#00FF66" /* Warna teks flash ke dua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama

(tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua

(tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // 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>
</div> 

Catatan :

Ganti tulisan "Tempat Berbagi Ilmu Untuk Sesama"  Berwarna Merah Pada Script Di atas dengan tulisan yang teman mau. var flashingletters=19 - var flashingletters2=19 : pada link 8 & 9 . Ganti angka 19 dengan angka yang teman mau (Tips* hitung seluruh tulisan dan spasi yang teman masukkan pada line 3 (kode 1) atau line 5 (kode 2), kemudian bagi 2, setelah itu ganti angka 19 dengan hasil pembagian tadi.

Selamat mencoba membuat text animasi tulisan berwarna & Semoga berhasil