Tạo thanh ngang bar cố định cho blogspot, Web

Như đã hẹn với các bạn về việc chia sẻ thủ thuật để tạo được 1 thanh bar ngang cố định khi chúng ta kéo thanh cuộn của trình duyệt như trang của blog này. Blog này là có sẵn của template tuy nhiên mình sẽ hướng dẫn các bạn ở mọi template của blog hoặc website khác đều có thể làm được như vậy.
Demo trực tiếp tại Blog: Á đù Dịch vụ SEO Web hàng đầu
Với code này người xem có thể tắt bar đó đi nếu cảm thấy nó làm phiền. Thật tiện lợi


- Nếu bạn giữ cố định 1 tiện ích thì có thể xem thêm bài này: Tạo Sticky kết dính Widget

Hướng dẫn tạo thanh ngang bar cố định cho blogspot, Web

Bước 1. Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML).
Bước 2: Ctrl + F tìm tới </b:skin> và dán code dưới đây ngay trên nó
/* Thanh tren cung hướng dẫn bởi seophongvu.com */
#mbb_bar {
    background: none repeat scroll 0% 0% rgb(34, 34, 34);
    width: 100%;
    margin: 0px auto;
    text-align: center;
    padding: 5px 0px 5px 25px;
    z-index: 9998;
    height: 27px;
    position: fixed;
    vertical-align: baseline;
    letter-spacing: 1px;
    color: rgb(255, 255, 255);
    font-size: 13px;
    font-weight: bold;
    font-family: Helvetica,sans-serif;
    line-height: 24px;
    border-top: 1px solid rgb(0, 0, 0);
    border-bottom: 2px solid rgb(144, 241, 40);
    text-shadow: 1px 1px 4px rgb(0, 0, 0);
    text-decoration: none;
    box-shadow: 1px 2px 9px rgb(144, 241, 40);
}
#mbb_bar a{
text-decoration:none;
color:#FFFC00;
font-size:12px;
font-weight:bold;
font-family: verdana, arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbb_bar a:hover{
text-decoration:underline;
}
#mbb_bar p {margin:0; list-style:none;}
#mbb_bar img {vertical-align: middle;
margin-right: 6px;}
Bước 3: Ctrl + F tìm tới </head> và dán code dưới đây ngay trên nó
<!-- Thanh tren cung huong dan boi seophongvu.com -->
<script type='text/javascript'>
//<![CDATA[
var mbb_arr = new Array();
var mbb_clear = new Array();
function mbbFloat(mbb) {
mbb_arr[mbb_arr.length] = this;
var mbbpointer = eval(mbb_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbbsrc = document.all? document.all[mbb] : document.getElementById(mbb);
this.mbbsrc.height = this.mbbsrc.offsetHeight;
this.mbbheight = this.cmode.clientHeight;
this.mbboffset = mbbGetOffsetY(mbb_arr[mbbpointer]);
var mbbbar = 'mbb_clear['+mbbpointer+'] = setInterval("mbbFloatInit(mbb_arr['+mbbpointer+'])",1);';
mbbbar = mbbbar;
eval(mbbbar);
}
function mbbGetOffsetY(mbb) {
var mtaTotOffset = parseInt(mbb.mbbsrc.offsetTop);
var parentOffset = mbb.mbbsrc.offsetParent;
while ( parentOffset != null ) {
mbbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbbTotOffset;
}
function mbbFloatInit(mbb) {
mbb.pagetop = mbb.cmode.scrollTop;
mbb.mbbsrc.style.top = mbb.pagetop - mbb.mbboffset + "px";
}
function closeTopAds() {
document.getElementById("mbb_bar").style.visibility = "hidden";
}
//]]>
</script>
Bước 4: Tìm tới <body> và dán code dưới đây ngay dưới nó
<!-- Thanh ngang -->
<div id='mbb_bar'>
<font style='color:#FFFC00;'/>
<strong>
<font color='#84DC04'>
  <a href='http://seophongvu.com' target='_blank'>Cong ty SEO</a>
</font>
</strong>
cung cấp <a href='http://www.8dichvuseo.com' target='_blank'>Dich vu SEO</a> - Á đù <a href='http://adudichvuseoweb.blogspot.com/' target='_blank'>Dich vu SEO Web</a> Liên kết...
Bước 5: Các bạn lưu mẫu lại và xem kết quả.
Chúc các bạn vui vẻ !
Nguồn: http://thuthuat-vui.blogspot.com/2014/03/tao-thanh-ngang-bar-co-dinh-cho-blogspot.html Chuyên mục: , , ,

0 nhận xét:

Đăng một bình luận