Cara Membuat Animasi Text Neon Color LED Display pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Animasi Text Neon Color LED Display pada Blog

Pilihan Editor :

Cara Membuat Animasi Text Neon Color LED Display pada Blog
Penulis Bagus Surochman
2
Modus malam




KURAZONE ~ Pada kesempatan kali ini kami berbagi mengenai "Cara Membuat Animasi Text Neon Color LED Display pada Blog", sedikit gambaran saja bahwa animasi pada text neon color ini agak mirip dengan animasi pada Lampu LED Display.

Ambil kode JavaScript dibawah ini
<script>
var message=" TERIMA KASIH ANDA TELAH MENGIKUTI BLOG INI "
var neonbasecolor="white"
var neontextcolor="green"
var neontextcolor2="red"
var flashspeed=50
var flashingletters=10
var flashingletters2=1
var flashpause=1
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>
Letakkan terserah kalian :
1. bisa di Tata letak >> widget HTML/Javascript
2. atau di Template >> Edit HTML
Kemudian Paste lalu SIMPAN

Keterangan :

var message=" TERIMA KASIH ANDA TELAH MENGIKUTI BLOG INI "

Ganti tulisan " Terima Kasih Anda Telah Mengikuti Blog Ini " menjadi teks yang kalian inginkan, misalnya " Selamat Datang di Blog Kurazone ", (Besar kecil huruf mempengaruhi tampilan)

var neonbasecolor="white"

white adalah warna default pada teks, white cocok digunakan untuk blog dengan tema gelap. Silahkan ubah ke "black" jika kalian menggunakan tema light

var neontextcolor="green" dan var flashingletters=10

adalah warna pertama yang akan tampil pada animasi, warna green adalah warna hijau, sedangkan 10 adalah jumlah huruf yang akan terkena warna hijau (spasi juga dihitung). Lihat gambar dibawah ini sebagai ilustrasinya. (hitung berapa teks yang berwarna hijau? termasuk spasi).

var neontextcolor2="red" dan var flashingletters2=1

adalah warna kedua yang akan tampil pada animasi, warna red adalah warna merah, sedangkan 1 adalah jumlah huruf yang akan terkena warna merah (spasi juga dihitung). Lihat gambar diatas sebagai ilustrasinya. (hitung berapa teks yang berwarna merah?)

var flashspeed=50 dan var flashpause=1

50 pada flashspeed adalah kecepatan animasi, sedangkan 1 pada flashpause adalah waktu delay (tunda)

>> #teks, #warna dan #nominal angkanya bisa kalian ubah sesuai keinginan kalian.

Itulah "Cara Membuat Animasi Text Neon Color LED Display pada Blog", selamat mencoba dan semoga bermanfaat. Goodluck !!

DEMO :
nanio
Cara Membuat Animasi Text Neon Color LED Display pada Blog
Cara Membuat Animasi Text Neon Color LED Display pada Blog Cara Membuat Animasi Text Neon Color LED Display pada Blog Reviewed by Bagus Surochman on 6/14/2018

2 komentar:

  1. Waaaw... keren...
    Kayaknya enak nih di copy paste untuk nambahin artikel di blog saya.

    Aku ijin CoPas yo mas.. :p

    BalasHapus
    Balasan
    1. Silahkan mas.. asal kamu bahagia.. stock bunga masih banyak kok..
      kalo mau.. mampir aja ke rumah., :v

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.