"Tiện ích "Topbar" trượt dọc cho Blogspot"

(Traidatmui.com) - Trước đây mình đã giới thiệu đến các bạn thủ thuật "Tạo banner chạy dọc hai bên của blog" (bạn có thể xem tại đây). Tương tự hôm nay mình chia sẻ cùng các bạn cách tạo một nội dung text chạy dọc bên blog khi bạn cuộn chuột. Thật ra, ở đây bạn cũng có thể dùng nó cho việc hiển thị banner, bạn chỉ việc chỉnh sửa tí xíu là được. Khác thủ thuật banner chạy dọc ở đây có thêm công cụ tắt (close) khi bạn không thích thấy nội dụng đó nữa. Để thấy rỏ hơn bạn xem demo bên dưới, ở đây mình sẽ hướng dẫ bạn chèn ngay vào HTML/Javascript để đơn giản.

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và chèn vào code bên dưới
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid #ccc; /* màu đường viền*/
padding: 4px;
color:#000;
background-color: #fff; /* màu nền phần chứa nội dung*/
width: 420px; /* độ rộng của tiện ích*/
visibility: hidden;
z-index: 100;
}
#topbar a{color:#0000ff; /* màu link*/
}
#topbar a:hover{color:#ff0033;/* màu link khi rê chuột*/
}
#close {
float:right;
margin-top:-3px;
margin-right:-8px;
padding:0px 0px 0px 4px;
height:12px;
width:14px;
background: url(https://lh5.googleusercontent.com/_BTztXRwC9ik/S9AmuSc35fI/AAAAAAAACBk/fwtrW9tG-KU/close.gif) no-repeat right;}
</style>


<script type="text/javascript">
var persistclose=0
var startX = 30 //vị trí của tiện ích theo chiều ngang, nếu bạn muốn nó nằm bên phải thì tăng số này lên
var startY = 5 //vị trí của tiện ích theo chiều doc, đây là cách trên
var verticalpos="fromtop" //nếu muốn tiện ích nằm ở cuối blog bạn thay fromtop thành frombottom
function iecompattest(){
return (document.compatMode && 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 && 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>

<div id="topbar">
<a class="close" id="close" alt="Đóng cửa sổ này" title="Đóng cửa sổ này" href="#" onclick="closebar(); return false"></a>

NỘI DUNG CỦA BẠN Ở ĐÂY

</div>

Bạn hãy dựa vào các phần hướng dẫn trong code để tùy chỉnh cho phù hợp và đặt nội dung tại dòng màu đỏ ở trên.

5. Cuối cùng save tiện ích lại

Chúc bạn thành công

Xem khác cùng chủ đề

2 nhận xét | Viết lời bình

6/24/2011 01:46:00 SA Trả lời

Cái này em làm thử trên mấy blog đều ko được anh Đình ạ

6/24/2011 01:50:00 SA Trả lời

À ko có cái được có cái ko,chắc lại xung đột Code ,tức was

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang