02 November 2010

Cara Memberi Efek Lampu Neon pada Tulisan

Effect flashing didalam text adalah murni dari pengaruh JavaScript, tanpa menggunakan kode CSS.
Neon Text Color jQuery ini dapat digunakan di postingan ataupun di sidebar, guna mempercantik tampilan blog/website sobat.
Jika ada yang tertarik langsung saja ke langkah-langkah membuat Neon Text Color jQuery.
Masukan kode JavaScript dibawah ini pada postingan pada mode Edit HTML
atupun di sidebar dengan cara Tambah GadgetHTML/JavaScript pada widget sidebar sobat.

<script language="JavaScript1.2">
var message="Tulisan Yang diberi Efek"
var neonbasecolor=""
var neontextcolor="#fd3d3a"
var neontextcolor2="#ff8080"
var flashspeed=50 // kecepatan flashing dalam milliseconds
var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0 // pause diantara flash-cycles dlm milliseconds
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>
Download Script

Keterangan :
ganti kode Tulisan Yang diberi Efek dengan tulisan yang akan diberikan efek.
kode #fd3d3a dan #ff8080, ganti kode warna dengan kode warna yg sobat suka.
angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya.
angka 5 adalah merupakan jumlah huruf yang di flashing.
angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh.


Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi, seperti di bold, atau di warnai.

Selamat mencoba

No comments:

Post a Comment