TẠO BẢNG THÔNG BÁO (KIỂU 4)

Ở bài viết này, tôi xin giới thiệu với các bạn thêm một cách làm bảng thông báo cho blog.

Với bảng thông báo này, các dòng chữ gởi đến khách tham quan sẽ được thay đổi theo thời gian do bạn định trước và sẽ chạy từ dưới lên khá đẹp. Đặc biệt bạn cũng có thể gắn link liên kết đến các trang Web/Blog khác từ bảng thông báo này.
Bạn bấm vào "Xem thử" phía dưới để xem bảng thông báo mẫu nha!!!

Xem thử

Bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào

<script language="JavaScript1.2">
var scroller_width='230px'
var scroller_height='115px'
var bgcolor='#ffffff'
var pause=7000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='nhập nội dung hiển thị tại đây.<a href="link liên kết">Bấm vào đây </a>nhập nội dung hiển thị tại đây'
scrollercontent[1]='nhập nội dung hiển thị tại đây<a href="link liên kết">Bấm vào đây</a>nhập nội dung hiển thị tại đây'
scrollercontent[2]='nhập nội dung hiển thị tại đây.<a href="link liên kết">bấm vào đây</a>nhập nội dung hiển thị tại đây.'
scrollercontent[3]='nhập nội dung hiển thị tại đây.'

////NO need to edit beyond here/////////////

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>


Bây giờ, bạn thay đổi các dòng chữ màu xanh và đỏ theo ý của mình, trong đó:
* var pause: Tốc độ chữ chạy lên (số càng lớn chữ chạy càng chậm).
* Width: Chiều rộng của khung thông báo
* Height: Chiều cao của khung thông báo.
Sau cùng bấm Lưu lại rồi vào blog xem kết quả
Chúc các bạn thành công.