TẠO BẢNG THÔNG BÁO (Kiểu 10)

Là một người quản trị Web/Blog chắc hẳn đôi lúc các bạn cũng muốn gởi những thông điệp hoặc những dòng thông báo cần thiết đến khách tham quan. Trước đây, tôi cũng đã chia sẻ cho các bạn một số mẫu thông báo (xem TẠI ĐÂY).

Hôm nay, tiếp tục dunghennessy chia sẻ đến các bạn thêm một mẫu thông báo nữa khá đẹp mắt.

Điều đặc biệt ở thông báo này, ngoài những dòng chữ đơn thuần, các bạn còn có thể chèn những hình ảnh tĩnh hoặc động kèm theo link liên kết đến các trang mà bạn đã gắn liên kết (có thể dùng để quảng bá Web/blog hoặc sản phẩm nào đó khá tiện dụng...).

Mời các bạn bấm vào "Xem thử" phía dưới để thấy rõ hơn bảng thông báo (kiểu 10) này nha.

Xem thử

Rất đơn giản, các bạn chỉ cần đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Bạn copy đoạn code này dán vào hộp tiện ích HTML.

<div style="color: aqua; text-align: center;">
<style type="text/css">

#dropinboxv2cover{
width: 470px; /*Chiều rộng của bảng thông báo*/
height: 320px;  /*Chiều cao của bảng thông báo*/
position:absolute;
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
border: 2px solid orange; /*Kích thước và màu của đường viền*/
background-color: Black; /*Màu nền của bảng thông báo*/
padding: 4px;
position:absolute;
left: 0;
top: 0;
}

</style>

<script type="text/javascript">
var dropboxleft=350 //Khoảng cách từ bên trái blog đến bảng thông báo
var dropboxtop=100 //Khoảng cách tính từ trên blog đến bảng thông báo
var dropspeed=15 //Tốc độ rơi của bảng thông báo(Số càng lớn tốc độ càng nhanh)

//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="oncepersession"

///Đừng sửa đổi các dòng lệnh dưới đây!!!///////////

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById

function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}

function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}

</script>

<div id="dropinboxv2cover">
<div id="dropinboxv2">
<a href="http://dunghennessy.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9yDx4b8IBfdlerCplMm751u-8aEF_8proTYMt2r5PbGurqMdyYo6-8XuRUFlyOQUganHFduFqOg9utmBuXbAYeW0eDoA_tViOa5IFc8c6gTqnmGwqC_YAW9h_PW4yFlIDhWt2edctx5m/s1600/Warning.gif" width="300" height="50"/></a><br/>
Nội dung thông báo ghi ở đây
<br/>
Nội dung thông báo ghi ở đây<br />
<p><a href="Link liên kết">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLxoCA2osEu98iaMHrwqyJ-FXuCCqLPhACjBd4tT1-VVHQXjSJsET00DXV0xBfCXgFTh0gQHuXh9iIs6ZCptI5p2ioJxO_ztQ99PixSQgvTugob4-66zJouCkeUPACN-VukaUiFuR1wg2/s1600/goodluck3.gif" /></a></p><br/>
<br/>
<p align="right"><a href="#" onclick="dismissboxv2();return false"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYj2bYS7g1phHRSuwViMBXzVaI3VsQrOmdtRCUKO8X4w5dSQvnCNpMRMqYge27h64zgFxQoCeAtmu3Ussv4WJRswGNt0gDSXKhoidHH8jkT4soPB8AusX1M-O7jHiB_BtX6Ace4tYp50Gv/s1600/www.loogix.com_10934923.gif"/></a></p>

</div>
</div>
</div>

Bây giờ bạn có thể thay đổi tuỳ ý của các dòng lệnh màu đỏ (có chú thích trên code) và dòng lệnh màu xanh, trong đó bao gồm: Link liên kết, link ảnh của chữ Warning, link ảnh của chữ Close...để phù hợp với bạn, cuối cùng bấm Lưu lại là xong.
Lưu ý: Ở đoạn code trên là bảng thông báo chỉ xuất hiện một lần duy nhất, nếu bạn muốn bảng thông báo này đều xuất hiện ở mỗi lần load trang thì bạn thay dòng lệnh "oncepersession" (màu vàng) thành "always" và bấm Lưu lại là xong.