By Girant_31
Sudahkah sobat melihat tulisan diatas ?? ya itulah yang dimaksud Neon Text Color jQuery.. Effect flashing didalam text adalah murni dari pengaruh java script, tanpa menggunakan CSS sama sekali.
Neon Text Color jQuery ini dapat digunakan di postingan maupun di sidebar, guna mempercantik tampilan blog/website sobat.
Tertarik ??!!
Langsung saja ke langkah-langkah membuat Neon Text Color jQuery.
Masukan kode java script dibawah ini pada postingan ( pd mode Edit HTML ) atupun di sidebar ( dg menambahkan add gadget HTML/Java Script pd widget sidebar sobat).
<center><h1><script language="JavaScript1.2"> var message="DEMO" var neonbasecolor="" var neontextcolor="#FD3D3A" var neontextcolor2="#FF8080" var flashspeed=50 // kecepatan flashing dalam milliseconds var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable) var flashpause=0 // pause diantara flash-cycles dlm milliseconds 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></h1></center>
Perhatikan kode yang di highlight.
kode pada baris kedua, ganti kode DEMO dengan tulisan yang akan diberikan effect.
kode pada baris keempat dan kelima, ganti kode warna dengan kode warna yg sobat suka.
kode pada baris keenam, angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya.
kode pada baris ketujuh, angka 5 adalah merupakan jumlah huruf yang di flashing.
kode pada baris kedelapan, angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh.
Selesai.
Terbitkan postingan sobat dan lihat hasilnya.
Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi.. seperti di bold atau di warnai.
Selamat mencoba dan semoga bermanfaat.
Design
,
jQuery
,
Tips n Trik
Title Posted By On Tag Comments Subscribe |
: Neon Text Color jQuery : Agus Adi S. From Girant_31 Blog : Kamis, Juli 15, 2010 : Design , jQuery , Tips n Trik : 6 People Commented : RSS Feed or leave a response for this article, Here. |
tapi kalau dipasang di blog apakah tidak memberatkan loading blog
Insya Allah engga pak liek..
walah namanya ko ganti pak, knp???
Knp ga JAMU KOPI SUSU.. hehe..
Ya gitu dech mas.. :D