Kamis, 08 September 2011

Animasi Neon Light pada Teks Blog

Membuat variasi teks sangatlah bermacam-macam, salah satunya adalah teks dengan animasi neon light. Animasi teks ini mungkin dibutuhkan oleh teman-teman blogger untuk mempercantik blognya. Meskipun pernah saya posting sebelumnya tentang cara membuat efek marquee teks, akan tetapi efek yang akan dibuat pada teks kali ini sangatlah berbeda jauh.

Dengan script dibawah ini akan membuat teks dengan efek neon light, dimana teks akan menyala dari posisi sebelah kiri kekanan hingga semua teks akan terlihat menyala.

Anda tertarik untuk mencobanya?
Silakan ikuti langka berikut.
  • Login Blogger anda;
  • Pilih Rancangan;
  • Klik tab Tambahkan Elemen (Gadget)
  • Pilih HTML/JavaScript
  • Copy paste kode dibawah kedalam HTML tersebut;
<h2>
<script language="JavaScript1.2">
//Visit http://kang-onk.blogspot.com for this script
var message="Selamat Datang di Blog Kang Onk Design"
var neonbasecolor="red"
var neontextcolor="blue"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // kecepatan berkedip
var flashingletters=3 // jumlah huruf yang berkedip
var flashingletters2=1 // jumlah huruf berkedip dalam neontextcolor2 (0 untuk menonaktifkan)
var flashpause=0 // jarak jeda antara flash-siklus dalam milidetik
///please do not delete the line and text/////
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
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(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
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></h2>

Lalu Simpan;
Dan hasilnya:

*Catatan: silakan ganti huruf yang bercetak tebal diatas sesuai dengan template dan kesukaan anda.

Semoga berhasil dan berguna bagi anda semua.

2 komentar: