Hôm nay là

Tiện ích tự động cuộn blog

Thứ Ba, 11 tháng 7, 2017 - - 7 comments - lượt xem



Các bạn có nhìn thấy 5 biểu tượng xếp theo hàng dọc và nằm sát cạnh bên phải tấm ảnh ở trên không?
Đó chính là 5 nút điều khiển blog tự động cuộn, có chức năng theo thứ tự từ trên xuống như sau:
- Lên đầu trang blog đang xem.
- Trở lại trang trước vừa xem.
- Dừng cuộn trang đang xem.
- Tự động cuộn trang đang xem.
- Xuống luôn cuối trang đang xem.
Các bạn có thể chạy thử 5 chức năng trên tại blog này.

Để cài đặt tiện ích trên vào blog, các bạn thực hiện như sau:
1. Đăng nhập blog - Bố cục - Nhấp "Thêm tiện ích" ở khung bên cạnh khung bài đăng.
2. Chọn tiện ích "HTML/Javascript". 
3. Nhấp "Open code" ở dưới đây, copy toàn bộ code trong khung hiện ra và dán vào khung "Nội dung" của tiện ích HTML/Javascript. Không cần đặt tên tiêu đề của tiện ích vì code này chạy ngầm trong blog. 


<!-- BAT DAU LEN XUONG -->

<style type='text/css'>
#backscroll {
width:20px;
line-height:15px;
position:fixed;
right:15px;
top:75%;
}
</style>


<script language='javascript'>


/* <![CDATA[ */ suspendcode="<div id='backscroll'><a onclick='javascript:amutop();return false;' href='#' title='Đầu Trang'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHLouuXC72tgy6IEBMngXI49vzi0H8qLTcRIwb8OXSwIcz6vL33chyphenhyphendknM4VreEAsMJBTJDPgxFAirIhggcctwcZNhesrMqbxndMtKhftu8oEY4mDyjH6DxpvphTglcx1ZP9FDBCpRCk/s50/back-to-top-icon-44035.png\" width=\"25\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='Trang Trước'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEoXSt-gE0NSMucS_WMrlYe51wzI9Q695e2HVzMnzWovaEdCl1l7c-lgJBIuorCJnj3HI8anHOfjhtbG5KlCMwIBjSfvGzwEiH66MZiaaR7EbtLlGfB1zSBDuVdFoHT_FHw6b3qe0PUbg/s1600/arrow_button_metal_yellow_back_T.png\" width=\"25\"></a><br><a onclick='javascript:sc();return false;' href='#' title='Dừng Cuộn'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSJR2GvKmVCa-JPUGoIrhtxaj57I9Yy94PGhqB9SOoUrBZhFeNFLSlhLCMTfXHmgQEyCA8q3WANksqhbScukxIs5i6Lz10Bbd2YBucmc0GRTDh4efIG5hkobXTgFO36fQ2yEfHP2Utmk/s50/stop_song_red-512.png\" width=\"25\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='Tự Cuộn'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtyEZJThrlJP6rhG-2YmKy5r6DS8wI8XYDxRrPjg2S609dmx3ps_COo60XzbcNhCq_fL3H9fGsFA-GNUmsihyphenhyphenvLWLDl8NU9Oaa7gL0NTwqt7rWsdAN0GFJQRi8lQd2KqcR8DAxBTGE2jM/s48/kuba-arrow-button-set-4.png\" width=\"25\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='Cuối Trang'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLVgzpzfUpz4vKjNNa7ycrLqEGHQE4qR4eELa83-xmhMTrhNxzwbFUMcCRzyT9KOrCvkSBR9IHHLQ4eE2tCCLFqFnK_nxAyxTaCf9K5io1-s872q0Qfu0rtiYmJ16IKcVDg6LX-Dua1ls/s50/go-bottom-orange.png\" width=\"25\"></a></div>"


document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",60)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script>


<!-- KET THUC LEN XUONG -->
4. Nhấp "Lưu" dưới tiện ích. Kéo - thả tiện ích vào vị trí thích hợp, thường là vị trí cuối cùng trong khung các tiện ích bên cạnh khung bài đăng.
5. Nhấp "Lưu sắp xếp" phía trên, bên góc phải giao diện của Bố cục.
6. Nhấp "Xem blog" để thưởng thức kết quả.

*Ghi chú:
Các bạn có thể thay đổi các icon trong code và vị trí icon ngoài giao diện blog tùy ý thích của mỗi người. Ví dụ DVD đã thay đổi các icon có 5 màu khác nhau trong blog thực hành này.

Nguồn:
http://caocongkien.blogspot.com/2013/08/tao-nut-len-xuong-tu-ong-cuon-trang-cho_13.html


7 nhận xét:

  1. Hơ hơ, trang em cũng có 5 cái nút kỳ diệu này, hii

    Em cảm ơn Anh đã hướng dẫn quá tận tình, ạ!
    Em chúc Anh luôn khỏe và an vui ạ!

    http://dantricdn.com/tI0YUx18mEaF5kMsGHJ/Image/2013/03/Spring-2-5f86e.jpg

    Trả lờiXóa
    Trả lời
    1. HĐ đã cài tiện ích này rồi ha?
      Vậy thì HĐ đọc bài này cho vui thôi nhé!
      :)

      Xóa
    2. Đâu có vui đâu Anh, mà là quá vui là đằng khác vì em vào xem bài này và làm theo hướng dẫn của Anh mà. hii

      Xóa
    3. ...mà là quá vui vì em vào xem bài này và làm theo hướng dẫn của Anh mà. hii

      Vui quá nên em viết dư từ ngữ hii

      Xóa
    4. Thì ra là như thế, vậy thì DVD xin chúc mừng, vì HĐ đã áp dụng tiện ích thành công từ bài viết của DVD, DVD rất vui... :))

      Xóa
  2. Em làm được rồi yes :))

    Trả lờiXóa

Hướng dẫn viết nhận xét:
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
- Thêm một vài biểu tượng cảm xúc...

Tiện ích hướng dẫn comment và ký tự emoticons Zing

Hướng dẫn viết nhận xét:
- Gõ (hoặc copy và dán) ký tự bên phải biểu tượng cảm xúc muốn chọn vào khung nhận xét.
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
:)) :(( :) :-ss =)) :( :d @-) :p :-o [-( :-? :-t b-( =d>

Tiện ích hướng dẫn comment và ký tự emoticons Yahoo

Hướng dẫn viết nhận xét:
- Gõ (hoặc copy và dán) ký tự bên phải biểu tượng cảm xúc muốn chọn vào khung nhận xét.
- Dán link ảnh trực tiếp vào khung nhận xét không cần dùng thẻ.
* Chú ý: Link ảnh phải đặt cuối cùng. Sau link ảnh đã dán, không gõ thêm bất kỳ ký tự nào nữa, kể cả nhấn Enter.
:(( :( :)) ~X( :-h :-? b-) *-:) ~O) @};- >:D< =)) :) :-* :D [-X x( :-o =D> :@) :P :"> ;;) ;) :X =(( :-/