Gudang Tutorial Blog

Para master javascript pasti tidak asing dengan berbagai efek teks, karena saya pernah share cara membuat efek teks neon 3 warna. Kali saya ingin share script teks neon 2 warna.



Cara membuat teks neon 2 warna seperti berikut:



1. Login blog

2. Layout dan edit html/javascript

3. Copast kode script berikut dan simpan

<h2>

<script language="JavaScript1.2">

/*

Neon Lights Text

Visit http://www.mig33eagle.com

*/

var message="Ash and Arthur"

var neonbasecolor="#40FFFF"

var neontextcolor="#F73EA1"

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>

Ubah kode berwarna dengan teks dan warna kesukaan anda...\(◦'⌣'◦)/

text-decoration:	Keterangan	Hasil Tampilan
underline	Menggarisbawahi teks.	Mig33 Eagle Hill
overline	Menempatkan garis di atas teks.	Mig33 Eagle Hill
line-through	Menempatkan garis melalui tengah teks.	Mig33 Eagle Hill
blink	Membuat berkedip teks.	Mig33 Eagle Hill
none	Tidak ada dekorasi khusus.	Mig33 Eagle Hill

Penerapannya dalam link pada template blog

a:link {text-decoration:overline;}

ataua:visited {text-decoration:blink;}

keterangan:chrome tidak support dengan syntax "blink"

Demikian macam css text decoration.Semoga infonya bermanfaat.. シ

::selection {background:transparent; color:#F50C56}

::-moz-selection {background:transparent; color:#F50C56}

::-webkit-selection {background:transparent; color:#F50C56}

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

var message="Thank you for visiting Ash's Tutorial Blog!"

var neonbasecolor="red"

var neontextcolor="yellow"

var neontextcolor2="green"

var flashspeed=100 // speed of flashing in milliseconds

var flashingletters=3 // number of letters flashing in neontextcolor

var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)

var flashpause=0 // the pause between flash-cycles 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++)

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>