Tiện ích này đơn giản là các nút bấm điều khiển trên Blog của các bạn. Các nút như "Lên đầu trang" (TOP) hay "Xuống cuối trang" (BOTTOM) thì bạn đã quen thuộc. Ở đây tôi sẽ có thêm 3 nút với tính năng như "Trở về trang trước" (BACK), nút "Tự động cuộn" (SCROLL DOWN) Blog và "Ngưng cuộn" (PAUSE - STOP) Blog. Nút "Tự động cuộn" tức là khi bạn bấm vào nút này thì Blog bạn sẽ tự động cuộn xuống dưới từ từ, Việc này sẽ giúp người đọc có thể đọc bài viết mà không cần dùng chuột kéo thanh trượt hay "xe" con lăn chuột nữa. Các bạn có thể xem DEMO trực tiếp trên Blog của tôi. Các bạn nhìn sang bên phải sẽ thấy các nút bấm như tôi đã nói ở trên... Các bạn bấm vào lần lượt các nút để xem tính năng của nó...» Bắt đầu thủ thuật:
1. Đăng nhập vào tài khoản Blogger
2. Vào chọn Mẫu
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Chèn Code bên dưới vào sau thẻ: <head>
<style type='text/css'> #backscroll { width: 30px; line-height: 50px; position:fixed; right: 5px; top: 150px; } </style> <script language='javascript'> /* <![CDATA[ */ suspendcode="<div id='backscroll'><a onclick='javascript:amutop();return false;' href='#' title='TOP'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRZXIK_bolL3P05ftT_ZrV7Icg2O78g-ozz0-fXs33nadPr4SAGtIm-zbeTtZFf1jbPOTJPeJQi3jCDo_eB5jRkhjUy73PQOy5NpZwBst2snf-Mi1oC5IWjz4Q-U7mUb72luYpIJCJ4c8/s48-no/Top-Button.gif\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='BACK'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPiUY59FbXsBeRwIZQxA1Y7UtHkO7yA0AVluqjafy_JXTy4oz-6LnMZuWT_wJvOMzv9FmpE8TN4JYtg1RpSINRUosddB5le4SfM8jMUwN1sE9dGXDUOl8ccwt4dpWaC-lftnHOo2hHVbz/s48-no/Back-Button.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='PAUSE - STOP'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmx3Db_3FHgOe8ByDhXG9WdF5PcTMWN09mMNS8acGEf5mlRq7dDPO6UBYZwK-hk2XzOQ4TRFJZ_YXwDgSa2eo3jUQUtzjw7AWEVMMUQnNdVn1TN17EH5sOYT_EIJUsqmiMQ9ASptWsYhKt/s48-no/Pause-Stop-Button.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='SCROLL DOWN'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPv5I9HGw75Z0CiL3dM2-PkwqkVvxp67T8E0RJBQgANV1IDBgxL_gosG-5ZHdISPVjM95Y3fzuIQXs_w0NJuNuhePeDTEOAbQY0o3UbDC4rxWgTWweOwkXki47MaIpm82a-QHSa6P2h-vO/s48-no/Scroll-Top-Button.gif\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='BOTTOM'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPAL7cLA2E2LN9r65ZPTYniySk8zohnmfu88cFWxlJPuvvBjH0lyvrhuA4cl2lp8qS3BXQARBjuNfajrJ5xUiWcF5J0eZbdkecR_Vd_SpbN7bl4BpYgEKCu0Hrwj-5xMHl4JTI-_eWtG6T/s48-no/Bottom-Button.gif\" width=\"30\"></a></div>" document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",30)}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>
5. Lúc này các bạn Save Template (Lưu Mẫu) lại là OK.
☼ LƯU Ý:
- Nếu trang Blog của các bạn thuộc dạng Theme "Ảnh chìm" như Blog của tôi thì các bạn phải đặt toàn bộ Code trên vào trước thẻ: </body>
Chúc các bạn thành công!
☼ LƯU Ý:
- Nếu trang Blog của các bạn thuộc dạng Theme "Ảnh chìm" như Blog của tôi thì các bạn phải đặt toàn bộ Code trên vào trước thẻ: </body>
Chúc các bạn thành công!
Cảm ơn bạn đã chia sẻ rất nhiệt tình... :D
Trả lờiXóaHải Yến (Nha Trang)