Tạo một thanh Bar nổi vào phía trên blog của bạn

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

Bạn có bao giờ nghĩ mình sẽ tạo 1 dòng tin quan trọng ở ngay phía trên cùng của blog? Hôm nay, Thu thuat vi tinh sẽ giúp bạn làm được điều đó. Kịch bản này sẽ hiển thị một thanh nổi ở ngay trên cùng của cửa sổ blog, nó sẽ lướt nhẹ nhàng trở lại khi trang được cuộn. Nội dung HTML thông thường có thể được hiển thị bên trong của nó. Và để làm cho thanh ít xâm nhập, một khi nó được đóng lại (bằng cách nhấp vào "x"), thanh bar có thể được thiết lập để bỏ qua cho toàn bộ thời gian của phiên trình duyệt, bằng cách sử dụng các tập tin cookie. Tải lại trang sẽ không mang nó trở lại. Các trang web như About.com sử dụng một cái gì đó tương tự để hiển thị các mẩu tin quan trọng của thông tin ( xem hình bên dưới).

Làm sao để làm được điều đó? Bạn hãy thực hiện theo các bước sau:

 Bước 1:  Đăng nhập vào Blogger ->Layout -> Edit HTML và chọn đánh dấu vào hộp Expand Widget Templates Sau đó, tìm ( nhấn Ctrl + F) đoạn mã này trong mẫu:

</head>
Dán đoạn code dưới đây NGAY TRÊN nó:

<style type="text/css">
#topbar{
position:absolute;







border: 1px solid black;

padding: 2px;

background-color: lightyellow;

width: 620px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
* Code via http://bloggerstop.net
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels







var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode &amp;&amp;
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;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

.,

* Lưu ý: Bạn hãy thử và tự điều chỉnh thanh nổi của mình theo ý muốn:

- Bạn có thể điều chỉnh đoạn code màu đỏ theo ý thích (màu nền, kích cỡ bar)

- ...................

Nhấn Save Template

Bước 2:

Đến Giao diện -> Page Elements -> Click vào "Thêm một tiện ích" và chọn "HTML / JavaScript" loại. Và sau đó dán đoạn mã dưới đây vào nó:

.,

<div id="topbar">
<a href="#" onclick="closebar(); return false"><img src="http://i37.tinypic.com/2vd051i.gif" align="right" border="0" />
<a href="http://bdlab.blogspot.com/" onclick="closebar(); return true">Nội dung của bạn ở đây.
</div>

Thay "http://bdlab.blogspot.com/ bằng URL blog của bạn

Bấm vào Save      và ra xem thành quả nha...

                                                                       Nguồn tham khảo: bdlab.blogspot.com