Tạo nút Back to Top cho website hoặc blog

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho website hoặc blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang".



Sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên  website hoặc blog, thế là có bài đăng mới.

Cách 1: Sử dụng hiệu ứng từ Jquery.

- Sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang.

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML).
4-Chèn đoạn code sau phía trên </body>:

<style type='text/css'>
#bttop{border:1px solid  #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script  type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Trong đó:

Thay chữ BACK TOP TOP thành chữ bạn muốn.
Các bạn có thể tải file Jquery.js về sau đó Upload lên host riêng đề phòng link die. Nếu trong template của bạn đã có file Jquery.js thì có thể xóa đoạn code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'type='text/javascript'></script>
- Sau đó bấm Lưu Mẫu lại.

Cách 2: Sử dụng CSS

Cách này chỉ sử dụngh hinh ảnh và đơn giản hơn rất nhiều. do vậy nhìn sẽ không mượt như cách trên.

☼ Cách tiến hành:

1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Phầnt ử trang. (Layout)
4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào:


<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/-E-qglxRwEZQ/T4ExPj17OSI/AAAAAAAAA_I/B9GGkAR-MYk/s1600/top-namkna-blogspot-com.gif"/></a>

Rophi Studio

Trong đó 

Thay đổi chữ "Back to Top" thành hàng chữ nào mình thích (thí dụ: về đầu trang, lên trên...),
Thay đổi link ảnh màu đỏ thành link ảnh bạn mong muốn.

- Sau đó bấm Lưu Mẫu lại.

Tạo nút bấm nhảy lên đầu trang


Để 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 và 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.

☼ 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>

5- Sau đó bấm Lưu Mẫu lại.

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

About Kiến Minh

CƠ SỞ MAY ĐỒNG PHỤC SPA - TMV GIÁ RẺ UY TÍN TP.HCM May đồng phục Spa, Tmv, Văn phòng, Quán ăn, Học sinh, Gò Vấp - TpHCM Hotline + Viber + Zalo: 0972 87 15 18 ( Ms. Nguyệt ) Email: nguyethey@gmail.com Website: https://Maula.vn Fb: https://vi-vn.facebook.com/dongphucgiareSG/ Bản đồ: https://goo.gl/maps/p4BqngdP4tH2
    Blogger Comment

1 nhận xét:

  1. My co-worker just suggested the content software Ink for All. Would love to see your opinion of INK in a separate post here, if possible. Thanks!http://bit.ly/2IiHXlQ

    Trả lờiXóa

may dong phuc , may dong phuc gia re , dich vu quay phim , dich vu lam video , dich vu quay phim , dich vu lam video , may dong phuc spa , may dong phuc go vap , son epoxy gia re , dich vu lam video , dong phuc di chua , thi cong son , in hiflex , may dong phuc theo yeu cau , xuong may dong phuc spa , dich vu lam video , lam video quan 3 , dich vu quay phim chup hinh , dich vu video clip , ,

CHAT 💬 ZALO

CHAT 💬 FACEBOOK