Tạo thanh Stickybar với nút Close cho blog

Đăng bởi Admin | 15/10/13 | 0 nhận xét

Các Stickybar hoặc cố định Bar mà chúng tôi phát hành đã được chào đón nồng nhiệt. Một Close Button hoặc nút đó để che giấu màn hình hiển thị thanh Hủy bỏ tất cả những gì chúng tôi đã tìm kiếm được. Có thể không phải tất cả du khách thích xem mà thanh cố định ở phía trên, do đó, họ xứng đáng được cung cấp với một tùy chọn để xem hoặc ẩn thanh. Trong khi xem một trong những Blog Wordpress tôi tìm thấy nút này bên cạnh thanh cập nhật của họ. Tôi quản lý bằng cách nào đó để lấy một nửa kịch bản bị phá vỡ. Làm cho nó làm việc với các blogger mẫu là khó khăn bởi vì các mẫu blogspot được lập trình thông qua XML và các quy tắc của XML là thực sự khắc nghiệt khi nói đến trường hợp nhân vật. Gỡ lỗi các kịch bản là khó khăn nhưng Alhamdulillah công việc khó khăn đã được đền đáp. Bạn có thể nhìn thấy nó sống ngay bên phải của Stickybar của tôi ở đầu trang. Tôi rất phấn khởi chia sẻ nó với tất cả các bạn.

Tạo ra một StickyBar Với Close Button trong Blogger

Các bước thực sự đơn giản như chúng ta đã thảo luận trong hướng dẫn trước đây của chúng tôi. Tôi sẽ không thảo luận về làm thế nào để thay đổi màu sắc font và màu nền của thanh bởi vì bạn có thể tìm thấy tất cả các chi tiết như trên hướng dẫn trước đây của tôi.Vui lòng có một cái nhìn vào họ sau để thay đổi các thuộc tính CSS:

Thực hiện theo các bước đơn giản sau:

Về Blogger> Thiết kế> Chỉnh sửa HTML
Sao lưu mẫu của bạn
Tìm kiếm mã này:

]]></b:skin>

4. Ngay phía trên nó dán mã CSS sau đây:

#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5Mkex9VE2ZcDsxtPJXgg51F3WRkghHaPmUNBzH7JdP14uVgy7VS00PclhqmxSpn2LTrmFhXVFl8SFUdnXx1ZrATbs2IKJPB1PtIoFxhq5tAmpYbkaehCN1b0X9fkgWjmHuenvgLbeyg/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;}

5. Tìm kiếm tiếp theo cho </ head> và dán đoạn mã Javascript sau ngay phía 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>

6. Cuối cùng tìm kiếm mã <body> và ngay dưới nó dán mã HTML sau đây:

<div id='mbt_bar'> Viết văn bản của bạn ở đây <span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLE7nnFpYMhygDv0UOaqo_LV7Ph2ocjzZNUB9dKOdRnnXodwuihkoo_mrIiBLogPPS3scLsmg980EVDIP54hE8JpnBDEqbIIHhzRS5jLz6oaAf26LVUEeoBfeTweSLcLV98uhmEi05jQ/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

Để viết một thông báo, cập nhật tin tức hoặc thông báo cho độc giả, chỉ cần thay thế các văn bản được đánh dấu màu vàng với thông điệp của bạn. Nếu bạn muốn thay đổi các nút Close hình ảnh sau đó chỉ đơn giản là thay thế các liên kết màu đen in đậm liên kết với nút của bạn.
    7. Lưu mẫu của bạn
    8. Bạn đang làm tất cả!
Ra thăm blog của bạn để xem nó cố định vào đầu trang chỉ đẹp mắt với một nút đóng chờ đợi để được bấm!

Làm thế nào để nó hoạt động?

Nút đóng khi nhấp vào gây nên các closeTopAds function (); sau đó tìm kiếm các định nghĩa chức năng. Chức năng được định nghĩa như vậy mà nó đặt ra tầm nhìn của thanh để ẩn. Đó là cách ẩn thanh một khi nút được nhấp và chỉ xuất hiện lại trên trang làm mới.Thực sự là một cách khá gọn gàng để thực hiện một thanh người dùng thân thiện.

   Nguồn: mybloggertricks.com

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

15/10/13