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
- Klik Page Element
- Klik Add Gadget
-
- Klik plus button (+) for HTML/JavaScript. (img)
- 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>
<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 kuning, kode 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...!!
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 )
thx nih tutorialnya, mo dicoba dulu, bikin berat blog atau ga...
BalasHapusmakasih tutorialnya.
BalasHapusketinggalan banyak nih lama tak kesini.
contoh yg udah jadi mana ya?
BalasHapuspenasaran jadinya...
makasih tutorialnya...coba dulu ah...
@DIM. ngga bikin berat loadingnya tetap oke..!
BalasHapus@SDA. makanya rajin mampir... he he he makasih..!!
@narti. lihat tulisan selamat datang... diatas..!! thanks.!
Komentar ini telah dihapus oleh pengarang.
BalasHapusmakasih semuanya yang udah comment...
BalasHapussalam sukses slalu..!!
wah bikin tulisane jd menari tar..... belajar ah
BalasHapusijin pakai langganan ki,,
BalasHapussalam kenal...
banyak info menarik di sini....
BalasHapussayang ...ga ada contohnya ya sob...
@ rahmatea.. silakan lihat contoh di http://kibagusnet.blogspot.com/
BalasHapuskalau diblog ini lihat tulisan "selamat datang" diatas
memang tidak semua trik bisa dipakai kalau dipakai semua blognya bisa ramai sekali....
thanks...!