Tạo Bảng Thông Báo

™» CGC Blog «™ Với thủ thuật này các dòng thông báo của bạn sẽ xuất hiện khi trang blog của bạn vừa load xong và được nằm trên một khung có màu nền do bạn chọn. Đặc biệt hơn, bảng thông báo này được "dính cứng" ở trên đầu trang Blog cho dù bạn có kéo thanh trượt đến cuối chân blog bảng thông báo này vẫn xuất hiện.

Nếu không muốn xem nữa, bạn có thể bấm vào nút đỏ ở góc phải để đóng thông báo lại.
Bạn có thể xem thử bảng thông báo này ở trên đầu trang Blog của dunghennessy.

Chỉ cần bạn đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (nếu đang sử dụng giao diện blogspot mới, các bạn đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style type="text/css">

#informationbar{
position: fixed;
left: 0;
width: 100%;
text-indent: 5px;
padding: 5px 0;
background-color: darkgreen;
border-bottom: 1px solid black;
font: bold 12px Verdana;
}

* html #informationbar{ /*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}

</style>

<script type="text/javascript">
function informationbar(){
    this.displayfreq="always"
    this.content='<a href="javascript:informationbar.close()"><img src="http://icons.iconarchive.com/icons/saki/nuoveXT/32/Actions-button-cancel-icon.png" style="width: 20px; height: 20px; float: right; border: 0; margin-right: 5px" /></a>'
}

informationbar.prototype.setContent=function(data){
    this.content=this.content+data
    document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>')
}

informationbar.prototype.animatetoview=function(){
    var barinstance=this
    if (parseInt(this.barref.style.top)<0){
        this.barref.style.top=parseInt(this.barref.style.top)+5+"px"
        setTimeout(function(){barinstance.animatetoview()}, 50)
    }
    else{
        if (document.all && !window.XMLHttpRequest)
        this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"')
    else
        this.barref.style.top=0
    }
}

informationbar.close=function(){
    document.getElementById("informationbar").style.display="none"
    if (this.displayfreq=="session")
        document.cookie="infobarshown=1;path=/"
}

informationbar.prototype.setfrequency=function(type){
    this.displayfreq=type
}

informationbar.prototype.initialize=function(){
    if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){
        this.barref=document.getElementById("informationbar")
        this.barheight=parseInt(this.barref.offsetHeight)
        this.barref.style.top=this.barheight*(-1)+"px"
        this.animatetoview()
    }
}

window.onunload=function(){
    this.barref=null
}

</script>


<script type="text/javascript">
<!--Invocation code-->

var infobar=new informationbar()
infobar.setContent('Nhập nội dung thông báo tại đây')
//infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session!
infobar.initialize()

</script>

Bây giờ, bạn có thể thay đổi các dòng lệnh màu xanh theo ý của mình, trong đó: darkgreen là màu nền của khung, 12px là kích cỡ của chữ, dòng lệnh màu đỏ là link ảnh của nút bấm màu đỏ (close) nằm ở góc phải của dòng thông báo. Cuối cùng bấm Lưu lại là xong.

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

Nguồn : dunghennessy.blogspot.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!