Tuesday, March 30, 2010

Membuat Effek Neon Box Pada Teks

Script effek Neon Boks ( menyala ) pada teks merupakan kode HTML yang berfungsi untuk membuat teks menyala secara bertahap dengan warna tertentu, penggunaan cara ini cukup mudah dan sederhana.

Langkah pertama

  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini

<h3>

<script language="JavaScript1.2">

var message="Selamat Datang"
var neonbasecolor="black"
var neontextcolor="yellow"
var flashspeed=50 //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></h3>


Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.
  • warna merah, Teks yang akan digunakan ( silakan diganti sesuai keperluan )
  • warna Orange, kode warna teks sebelum terkena effek neon boxs. ( dapatkan kode warna disini )
  • warna kuningkode warna teks setelah terkena effek neon boxs. ( dapatkan kode warna disini )
  •  warna hijau,  kecepatan perubahan warna pada teks ( makin kecil angka makin cepat )

    _______________________________________
    Semoga bermanfaat...!!
    Selamat mencoba..! ( biasakan untuk melakukan pra tinjau pada saat melakukan perubahan pada Script HTML sehingga bila terjadi kesalahan tidak merusak kode script yang telah ada )

    No comments:

    Post a Comment