May 24, 2011

Cara membuat text neon light (efek teks yang menyala secara periodik)

Dengan menggunakan javascript kita bisa membuat sebuah efek teks yang menarik yaitu efek neon light (teks yang menyala dari awal karakter hingga karakter akhir. Teks tersebut akan menyala dari awal karakter hingga akhir. Untuk membuat efek neon pada teks cukup copy script di bawah ini, kemudian masukkan ke dalam gadget html/javascript.

Script codenya bisa dilihat dibawah ini :




<h2>
<script language="JavaScript1.2">

/*
Neon Lights Text
By JavaScript Kit (http://javascriptkit.com)
For this script, TOS, and 100s more DHTML scripts,
Visit http://www.dynamicdrive.com
*/

var message="Selamat datang di blog belajar seo!"
var neonbasecolor="gray"
var neontextcolor="blue"
var flashspeed=100 //in milliseconds

///No need to edit below this line/////

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++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",1500)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()


</script>
</h2>




Untuk mengatur efek dan warna sesuai keinginan, lakukan perubahan pada teks yang berwarna hijau di bawah ini:
var message="Selamat datang di blog belajar seo!"
var neonbasecolor="gray"
var neontextcolor="blue"
var flashspeed=100  //in milliseconds


Hasilnya bisa dilihat di bawah ini

Selamat datang di blog belajar seo!

 

Selamat berkreasi...!! 

 

AKTUAL NEWS ONLINE

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

2 comments:

  1. bagaiman cara ubah tulisannya gan??

    ReplyDelete
  2. ok thanks atas kunjungannya
    coba ganti teks Selamat datang di blog belajar se!" di bawah ini :

    var message="Selamat datang di blog belajar seo!"

    kemudian simpan dan lihat hasilnya....

    ReplyDelete

Komen yang bijak sangat di nantikan...! Terimakasih..