BẢNG THÔNG BÁO CHO BLOG (Kiểu 6)

Trước đây, tôi có chia sẻ với các bạn một số mẫu để làm Bảng Thông báo cho Web/Blog (Xem TẠI ĐÂY).
Hôm nay, tôi chia sẻ thêm cho các bạn một mẫu Thông báo (kiểu 6).
Với kiểu này, thì ở góc bên phải của bảng thông báo sẽ có nút tắt để đóng thông báo lại, đặc biệt hơn là bạn có thể bấm trái chuột vào tiêu đề của bảng thông báo để di chuyển bảng thông báo này đến bất cứ nơi nào bạn muốn trên Web/Blog. (Lưu ý thủ thuật này chỉ áp dụng thành công trên giao diện V2 được tải trên mạng về, không áp dụng cho giao diện mặc định của Blogspot.)

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<script type="text/javascript">


var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>


<div id="showimage" style="position:absolute;width:250px;left:40px;top:110px">

<table border="0" width="400" bgcolor="#025E02" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36px">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onmousedown="initializedrag(event)"><ilayer width="100%" onselectstart="return false"><layer width="100%" onmouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onmouseout="dragswitch=0"><center><font face="Verdana"
        color="#FFFFFF"><strong><medium>TIÊU ĐỀ THÔNG BÁO</medium></strong></font></center></layer></ilayer></td>
        <td style="cursor:hand"><a href="#" onclick="hidebox();return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bg2Nr-AYEhaBclYDU3rdVT_Tk9Gt4uXBoQ6wfXOTM2g2oK9yuHfSF2craDuH1sLj6ki5YR73SwORGgzwf6rB7ofanOqjw-ohCIG4SzGZ2xY8CYLWbSkK5QmqNxXgPvRhfIWCkaYIZrs/s1600/Sign-Close-icon.png" width="20px"
 height="20px" border="2" /></a></td>
      </tr>
      <tr>
        <td width="100%" bgcolor="#FFF380" style="padding:4px" colspan="2">

BẠN NHẬP NỘI DUNG CỦA BẢNG THÔNG BÁO TẠI ĐÂY
</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và nội dung của bảng thông báo), màu xanh (nơi bảng thông báo xuất hiện) để phù hợp với blog của bạn và bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀