Tạo Stickybar có nút đóng

Nếu bạn muốn gửi đến độc giả một lời chào, lời cảm ơn, lời thông báo hoặc là giới thiệu một bài viết mới thì bạn cần có một Stickybar. Tuy nhiên không phải lúc nào người đọc cũng thích sự xuất hiện của nó, vì vậy hôm nay mình giới thiệu với các bạn một mẫu Stickybar có nút đóng. Các bạn xem demo ở đây, nó nằm ở top đó!

#1 - Thêm CSS

1. Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
2. Tìm thẻ ]]></b:skin>
3. Dán code ở phía dưới vào trên thẻ vừa tìm được.

#mbt_bar{ 
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWjlttvoD_6yQyGB5S5rPSEVyCO4NhwUq5_0tnOKVchpEC5WyI0ky_IreEmAyiv6NgHP4M9G6nLwFsDxKIrWuEXWqr81rmmQn0T1ReohPrZMhKx2NdVM7vWbuiQgHEOAyd1ndQclk5JFw/s400/stickybar.png') repeat-x; 
width:100%; 
margin:0 auto; 
text-align:center; 
padding:0px 0; 
border-bottom: 1px solid #888888; 
  -moz-box-shadow: #666666 0px 1px 3px; 
  -webkit-box-shadow: #666666 0px 1px 3px; 
  box-shadow: #666666 0px 1px 3px; 
  z-index: 999; 
height: 28px; position:fixed; 
line-height: 1.85em; 
vertical-align: baseline; 
letter-spacing: 1px; 
color:#fff; 
font-size:13px; 
font-weight:bold; 
font-family: arial,"Helvetica",sans-serif; 
} 
#mbt_bar a{ 
text-decoration:underline; 
color:#E2E504; 
} 
#mbt_bar a:hover{ 
text-decoration:none; 
} 
#mbt_bar p {margin:0; list-style:none;} 
#mbt_bar img {vertical-align: middle; 
      margin-right: 6px;}

#2 - Thêm Scrip

1. Tìm thẻ </head>

2. Dán code dưới vào trên nó

<script type='text/javascript'> 
//<![CDATA[ 
var mbt_arr = new Array(); 
var mbt_clear = new Array(); 
function mbtFloat(mbt) { 
mbt_arr[mbt_arr.length] = this; 
var mbtpointer = eval(mbt_arr.length-1); 
this.pagetop = 0; 
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt); 
this.mbtsrc.height = this.mbtsrc.offsetHeight; 
this.mbtheight = this.cmode.clientHeight; 
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]); 
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);'; 
mbtbar = mbtbar; 
eval(mbtbar); 
} 
function mbtGetOffsetY(mbt) { 
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop); 
var parentOffset = mbt.mbtsrc.offsetParent; 
while ( parentOffset != null ) { 
mbtTotOffset += parentOffset.offsetTop; 
parentOffset = parentOffset.offsetParent; 
} 
return mbtTotOffset; 
} 
function mbtFloatInit(mbt) { 
mbt.pagetop = mbt.cmode.scrollTop; 
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px"; 
} 
function closeTopAds() { 
document.getElementById("mbt_bar").style.visibility = "hidden"; 
} 
//]]> 
</script>

#3 - Thêm HTML

Bước này sẽ giúp hiển thị những gì bạn muốn lên Stickybar

1. Tìm với từ khóa <body

Tùy vào người thiết kế template của bạn mà thẻ body rất khác nhau, có thể là <body> hay <body expr:class='"loading" + data:blog.mobileClass'> ... ,tuy nhiên chúng đều giống nhau ở phần đầu do đó tìm <body là ra được thẻ body của bạn

2. Dán code dưới vào dưới thẻ vừa tìm dược

<div id='mbt_bar'>

 NHẬP NỘI DUNG CẦN HIỂN THỊ Ở ĐÂY 
<span style='padding:0px; float:right'> 
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1B20xnF-TLNPl6LTxOVAcTZqDJ5KTKYr2p9-El3NZlJmlAuHcfOp-gmfBG_gyYoqoCBDIkoW20EHociQVLA-fODdm4vlabC4gm19_FAHeIBjszEaD4QAfy_T8024861RhmpIg5JYnSQ/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div> 
<br/><br/>

Ở trên thanh Stickybar này vẫn có thể chèn liên kết được bình thường bằng thẻ <a href="Link" rel="nofollow">Tên</a> , kiểu chữ <b>đậm</b> và <i>Ngiêng</i> , màu chữ...
4. Save và xem kết quả

Nguồn mbt

Khanh blog

Search This Blog