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 hijaukecepatan 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 )

    Komentar

    1. thx nih tutorialnya, mo dicoba dulu, bikin berat blog atau ga...

      BalasHapus
    2. makasih tutorialnya.
      ketinggalan banyak nih lama tak kesini.

      BalasHapus
    3. contoh yg udah jadi mana ya?
      penasaran jadinya...
      makasih tutorialnya...coba dulu ah...

      BalasHapus
    4. Anonim4/01/2010

      @DIM. ngga bikin berat loadingnya tetap oke..!
      @SDA. makanya rajin mampir... he he he makasih..!!
      @narti. lihat tulisan selamat datang... diatas..!! thanks.!

      BalasHapus
    5. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    6. Anonim4/01/2010

      makasih semuanya yang udah comment...
      salam sukses slalu..!!

      BalasHapus
    7. wah bikin tulisane jd menari tar..... belajar ah

      BalasHapus
    8. ijin pakai langganan ki,,
      salam kenal...

      BalasHapus
    9. banyak info menarik di sini....
      sayang ...ga ada contohnya ya sob...

      BalasHapus
    10. Anonim4/06/2010

      @ rahmatea.. silakan lihat contoh di http://kibagusnet.blogspot.com/
      kalau diblog ini lihat tulisan "selamat datang" diatas
      memang tidak semua trik bisa dipakai kalau dipakai semua blognya bisa ramai sekali....
      thanks...!

      BalasHapus

    Posting Komentar

    Note :
    . Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
    . Terima kasih komentarnya...
    . Semoga Bermanfaat...

    Berita terbaru

    Postingan populer dari blog ini

    Memahami Mutu Beton fc (Mpa) dan Mutu Beton K (kg/cm2)

    Mengenal bagian kusen pintu dan jendela kayu

    Menghitung Volume Besi per-m3 beton bertulang

    Menentukan ukuran Tangga dan Anak Tangga untuk bangunan bertingkat