Saturday, March 10, 2012

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

9:00 AM

 


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!



Salam BLOGGER..............,

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

0 comments:

Post a Comment

 

© 2013 ARTIKEL TER UP TO DATE . All rights resevered. Designed by Templateism

Back To Top