Đăng bởi: CTG blog
Thứ Hai, tháng 2 07, 2011
[20]
Thủ thuật: Button lên, xuống, vào giữa trang blog
Nguồn: [FD's BlOg]



Giới thiệu: Để tiện cho việc người khác lướt blog (web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang, hoặc nhảy vào giữa trang.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm dòng ]]></b:skin>

- Thêm vào trước nó đoạn code CSS sau:

/* Button lên, xuống, vào giữa trang blog (1)*/
#top-buttom_image {
position:fixed;
_position:absolute;

/*Vị trí đặt button*/
bottom:5px;
right:5px;

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

Bước 2: Tìm thẻ đóng </body>

- Thêm vào trước nó đoạn code sau:

<!-- Button lên, xuống, vào giữa trang blog (2) -->
<script type='text/javascript'>
var maxWidth = (document.body.clientWidth);
var maxHeight = (document.body.clientHeight);
</script>

<div id='top-buttom_image'>
<a href=' javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img alt='Vào giữa trang' border='2' src='LINK_HÌNH'/></a><br/>

<a href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' border='2' src='LINK_HÌNH'/></a>
</div>

Thay LINK_HÌNH thành link ảnh button của bạn.


Bước 3: Save template. (Lưu mẫu)


THE END.

4 nhận xét:

Trả lời
GÀ MẸ NHÍ NHẢNH nói...
lúc 21:28 10 tháng 12, 2011  

bạn biết trang web nào có button đẹp hem? thanks bạn,mình rất thích button của web bạn thanks

Trả lời
Rua nói...
lúc 08:49 11 tháng 12, 2011  

Trang chuyên cung cấp button thì mình không biết, chủ yếu là mình sưu tầm từ các hình icon thôi. :p

Gà mẹ vào trang này xem và tải về dùng nhé! Thường thì trong một bộ icon sẽ có các nút "top, down, next, preview".

Chúc vui! :cuoi

Trả lời
Ku nói...
lúc 20:05 12 tháng 3, 2012  

rất hay, thank

Trả lời
Ku nói...
lúc 20:14 12 tháng 3, 2012  

bạn có thể tạo hiệu ứng cuộn mượt được không

Lên đầu trang
Xuống cuối trang