30/01/2012

Button lên, xuống, vào giữa trang 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 Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. 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)


Một số mẫu button

          

0 nhận xét:

Đăng nhận xét

Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2010-2012 CON CUA BIEN. All rights reserved.