Senin, 27 Desember 2010

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

Informasi lengkapnya bis dilihat disini effect neon light text

Artikel Terkait:



15 komentar blog:

Khabar Dari Produksi mengatakan...

boleh juga tuuhh... info buat anda, blog anda selalu saya baca untuk pencerahan blog saya, salam

Komputer SEO mengatakan...

Makasih sudah berkunjung ke blog saya...

Pria Sederhana mengatakan...

info yg mantabs, tpi bikin berat loading blog gk sob?

X-NET mengatakan...

Mantap infonya :)

6jeansi9 mengatakan...

mkasih y keren bngat
http://war-ras.blogspot.com/

ViGoR mengatakan...

mantab..thanks infonya bro..teruslah berkarya..

Gothic mengatakan...

menarik buat di coba,,, thankz bro... hehehe

6jeansi9 mengatakan...

kunjung balik and follow y http://6jeansi9.blogspot.com

muchamad priyono mengatakan...

Gan kunjungi Blog ane yahh. ane pengen info-infonya. jangan lupa coment ya..Cz ane suka banget blog agan.

Purwokerto Ochin Leopard Inside mengatakan...

Thank's Info nya..
cara membuat bintang bertaburan di blog gimn ya..
kasiih info nya donkk..
thank's..

andhy mengatakan...

kungjungi blog aku yah gan...

Rudy Hartono mengatakan...

silaturahmi gan

telaga ngebel mengatakan...

bagusss banget gan... thanks for share

90animax mengatakan...

thanks infonya :)
yg suka anime mampir mari ya :)

She TheKill mengatakan...

keren bos.. thank you