Để tiện cho việc người khác lướt blog(web), 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. Bài viết này sẽ hướng dẫn các bạn thực hiển nó. Để cho sinh động, ta nên tạo nút bằng hình ảnh để thiết kế website chúng ta chuyên nghiệp hơn. Trải nghiệm người dùng tốt hơn cũng dễ dàng cho SEO.
>>Random Posts - Thủ thuật bài viết ngẫu nhiên cho Blogger Version 1
>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger
>>Recent Post - Thủ thuật Recent post load từ trên xuống cho BLogger
>>Recent Post - Thủ thuật Recent Post chạy ngang có ảnh chạy trước cho Blogger
>>Recent Post - Thủ thuật Recent Post chạy ngang cho Blogger
>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
>>Emoticons - Thủ thuật chèn biểu tượng vào bình luận Blogger
>>Related Posts - Thủ thuật bài viết liên quan có hình ảnh ngang cho Blogger
>>Recent Post - Thủ thuật Recent post load từ trên xuống cho BLogger
>>Recent Post - Thủ thuật Recent Post chạy ngang có ảnh chạy trước cho Blogger
>>Recent Post - Thủ thuật Recent Post chạy ngang cho Blogger
>>Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
Về cơ bản tiện ích này hoạt động tương tự như thủ thuật blogger tạo tiện ích Back To Top đơn giản và jQuery mà TEAM Blogger giới thiệu trước đây..Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.
2- Chọn Phần tử trang (layout).
3- Chọn Thêm tiện ích => Chọn thêm 1 tiện ích HTML/Javarscip
4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>.
#top-buttom_image {
position:fixed;
_position:absolute;
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);
}
Trong đó:- bottom:5px; là vị trí ảnh tính từ phía chân màn hình tính lên. Nếu muốn tính từ trên đầu thì thay bottom thành top
- right:5px; : Là vị trí của ảnh so với lề phải. Bạn có thể thay right thành left để căn lề trái
<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='http://1.bp.blogspot.com/-6y0Jh-TztG4/UaqgOoVa97I/AAAAAAAADOg/qdQupfB5OBA/s1600/top-thiet-ke-blogger-net.gif'/></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='http://2.bp.blogspot.com/-8n-VfdwPfxQ/UaqgOuBNz-I/AAAAAAAADOY/KXUumRtlRIw/s1600/play-pause-thiet+ke+blogger+net.gif'/></a><br/>
<a
href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối
trang'><img alt='Xuống cuối trang' border='2' src='http://1.bp.blogspot.com/-e248VFQfV2A/UaqgOmg0ArI/AAAAAAAADOc/6SgG28t4qrQ/s1600/bottom-thiet+ke+blogger+net.gif'/></a>
</div>
Thay link ảnh bằng link ảnh của các button Các bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào
5- Sau đó bấm Lưu Mẫu lại.
6- Một số link ảnh
Đăng nhận xét