Home » MẸO VẶT BLOGGER »
BẢNG THÔNG BÁO (Kiểu 7)
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.
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>
#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!!!
Sưu tầm bởi : www.meovatcuocsong.blogspot.com
Posted in
MẸO VẶT BLOGGER
Bài viết liên quan
Nếu bạn thích bài này thì hãy điền email để nhận bài đăng mới.
BÀI ĐĂNG NỔI BẬT
-
Hướng dẫn nuôi cá rồng - Arowana Theo văn hóa Trung Quốc, nuôi cá rồng đỏ trong nhà sẽ mang lại sự may mắn và thịnh vượng, chính vì thế m...
-
Nhiều người dùng vì ham rẻ mà mua nhầm iPhone 4 nhái . Loạt ảnh dưới đây giúp bạn so sánh iPhone 4 thật và giả. Hộp đựng điện thoại iPhone...
-
Đây là website chính thức do mr.Đông phát hiện ra http://www.pearsonlongman.com/newcuttingedge/ New Cutting Edge Elementary Student&...
Bình luận
Nhãn
AFRICA
(1)
CÔNG NGHỆ
(15)
HỌC TIẾNG ANH
(11)
karaoke
(7)
kế toán
(1)
KINH DOANH
(2)
KỸ NĂNG
(6)
m
(3)
MẸO CHỮA BỆNH
(14)
MẸO VẶT BLOGGER
(100)
MẸO VẶT GIA ĐÌNH
(5)
MẸO VẶT GIAO TIẾP
(12)
MẸO VẶT HỌC HÀNH
(10)
MẸO VẶT KINH DOANH
(30)
MẸO VẶT LÀM ĐẸP
(57)
MẸO VẶT MÁY TÍNH
(49)
MẸO VẶT NẤU NGON
(41)
MẸO VẶT THÀNH CÔNG
(1)
MẸO VẶT TỔNG HỢP
(39)
PHẦN MỀM
(64)
Sức khỏe bà bầu
(6)
TEMPLATE
(72)
THỜI TRANG
(1)
THỦ THUẬT
(14)
TIN TỨC
(224)
TÌNH YÊU-GIỚI TÍNH
(7)
tiq
(1)
VIDEO HÀI
(1)
windows
(3)
Xem phim
(1)
0 nhận xét cho bài đăng này
Hãy để lại nhận xét nếu bạn thích bài đăng này