Tin công nghệ và thủ thuật máy tính, phần mềm và blog

Xem gì?

Tiện ích

Blogger

MMO

Thứ Hai, tháng 7 25, 2011

Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)

Blogspot Back Top Thiết Kế Thủ Thuật Blogger
Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)
Để 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. Bài viết này mình 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.
Về cơ bản tiện ích này hoạt động tương tự như tiện ích Back To Top đơn giản jQuery mà mình 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.
Xem demo    Xem Demo
Ảnh minh họa:
Tạo nút bấm nhảy xuống cuối trang, lên đầu trang (back to top - bottom)
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Chọn Phầnt ử 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

5- Chèn đọan code sau vào trước thẻ đóng </body>
<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://2.bp.blogspot.com/-E-qglxRwEZQ/T4ExPj17OSI/AAAAAAAAA_I/B9GGkAR-MYk/s1600/top-namkna-blogspot-com.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://3.bp.blogspot.com/-gKWphHQmzFg/T4Ex2EaSxYI/AAAAAAAAA_Y/cY0vZE_As_U/s1600/play-pause-namkna-blogspot-com.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://2.bp.blogspot.com/-1rF3vy5AIZs/T4EyXiSex6I/AAAAAAAAA_o/eyJeP1zHdkU/s1600/bottom-namkna-blogspot-com.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

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

12 Comment: Thêm bình luận

Bài viết rất hay, thanks

Đơn giản copy nguyên 3 cái ảnh của blog bạn cho nhanh =)).

Tks vì bài viết ( cả 3 hình luôn :)) )

@ nội thất dth: Không có gì chúc bạn thành công! :P
@ Tùng Bi: :)) Ảnh mình Up trên hots đó bạn dùng cũng được nhưng tốt nhất nên Upload lên Blog của bạn để dùng. Không lúc mình xóa nhầm lại không còn hình :))
Chúc vui vẻ :P

ủa! nhưng mình test cái của mình trên FF+IE thì nó lại mở ra Tab mới còn Chrome thì lại đc:(

@ Tùng Bi: Bạn để ý lại coi có copy thiếu gì không vì một chi tiết nhỏ cũng có thể lỗi :P

sr! mình làm đc rồi :))
ko phải do mình dùng code Mở Tab ở trình duyệt nên nó bị thế :(
tks bạn :))

@ Tùng Bi: @-) thế mà mình cứ tưởng :-t

Chào bạn:
Mình đã làm giống như bạn và cũng đã hiển thị được. Tuy nhiên, Nó chỉ hiển thị góc bên trái dưới cùng và ở đó, nó đứng như của bạn bên góc phải màn hình và nó luôn hiển thị trên cùng như của bạn bạn xem giúp mình nhé.
http://sangnguyenmskg.blogspot.com

@sangnguyenMS (addmin) Đấy là do bạn làm ẩn nhầm đoạn CSS trước thẻ ]]></b:skin>.
Bạn vào chỉnh sửa HTML và tìm đoạn code sau:
<!-- Tao phan trang cho blog
.showpageArea {: 0; :0;
}.showpageArea a {: 1px solid #000;
color: #;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
background-color: #FE7A02;
}
.showpageArea a:hover {
font-size:11px;
border: 0px solid #F2791C;
color: #575757;
background-color: #3D3D3D;
}
.showpageNum a {border: 1px solid #000;
color: #fff;font-weight:normal;
padding: 3px 6px ;
margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #F2791C;
color: #575757;
background-color: #5D5D5D;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 0px solid #F2791C;
color: #fff;
background-color: #1FD807;
.showpage a:hover {font-size:11px
border: 0px solid #F2791C
color: #fff
background-color: #1589a2
.showpageNum a:link,.showpage a:link
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 0px solid #000;
color: #fff;
background-color: #FE7A02;
}
.showpageNum a:hover {font-size:11px;
border: 0px solid #F2791C;
color: #fff;
background-color: #1589a2;
}
<!-- Tao phan trang cho blog -->
#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);
}

-->
Chú ý 2 phần in đậm ở đầu và cuối nha:
- Bạn xóa cho mình 2 đoạn code ở đầu và cuối là:
+ Đoạn 1: <!-- Tao phan trang cho blog
+ Đoạn 2: -->
=> Giải thích thêm: Phải xóa 2 phần đó vì bạn dùng 2 thẻ ẩn thuộc tính đó là <!----> do đó nó làm ẩn toàn bộ các thuộc tính bạn chèn trên phần CSS. Do đó cái phân trang của bạn cũng không được phải không :P
Chúc thành công :)

Cảm ơn bạn đã hồi âm.
Nhưng tình hình là vẫn chưa theo ý mình, mình muốn nó nằm bên phải và đứng yên chỗ đó dù lúc đó mình đang ở đầu trang.
Cụ thể như của mình thì đang owr đầu trang mà muốn xuống cuối trang thì không thấy nó để bấm.
Bạn xem giúp lại mình nhé.
Cám ơn bạn nhiều

nhấn Ctrl+End / Ctrl+Home nhanh hơn.
còn nút căn giửa ở đây ko chính xác!

Đây là do mình chèn trực tiếp vào bài đăng để làm Demo nên có chút xai lệch thôi bạn. Chèn vào template sẽ khác phục được đó.

Bình luận của bạn: TOP

Thành viênTheo dõiHỏi đápBình luậnConvert

Thank you for comments!