Hiệu ứng "Neon" cho text trên Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Việc tạo hiệu ứng cho cũng khá nhiều cách, hôm nay mình sẽ giới thiệu bạn cách tạo hiệu ứng cho text với màu chạy ngang trông thật đẹp. Việc tạo chữ với hiệu ứng này cũng khá đơn giản, ở đây mình sẽ hướng dẫn bạn chèn ngay vào tiện ích HTML/Javascript của Blogger để không bị lỗi code. Bạn có thể xem phần mô tả của thủ thuật bên dưới bằng cách click LIVE DEMO.

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và chèn vào code bên dưới

<style>
.neonlight{font-weight:bold;
font-family:times;
font-size:13px; /*cở chữ*/
}
</style>

<script language="JavaScript1.2">
var message="TRAIDATMUI.COM" //thay thành dòng tin của bạn
var neonbasecolor="#000099" //màu của text
var neontextcolor="#FFFC17" //màu của hiệu ứng neon 1
var neontextcolor2="#FBB117" //màu của hiệu ứng neon 2
var flashspeed=120 // tốc độ chạy của màu neon 1 và neon 2, số càng nhỏ tốc độ càng nhanh
var flashingletters=2 // độ rộng của màu neon 1
var flashingletters2=1 // độ rộng của màu neon 2
var flashpause=0

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span class="neonlight" 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(){
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
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>

5. Save tiện ích lại và xem kết quả

Chúc bạn thành công

Chuyên mục: Blogspot cơ bản