Tiện ích này bao gồm các nút bấm điều khiển trên blog của bạn, các nút như lên đầu trang hay xuống cuối trang thì bạn đã quen thuộc, ở đây mình sẽ có thêm 3 nút với tính năng như trở về trang trước, nút tự động cuộn blog và ngưng cuộn 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ừ, đâ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 nữa. Bạn có thể xem demo trực tiếp trên site mình, bạn nhìn san bên phải sẽ thấy các nút bạn bấm vào lần lượt các nút để xem tính năng của nó.
Xem minh họa trên web: View DemoDưới đây là hình minh họa:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Phầnt ử trang.
4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào:
<style type='text/css'> #backscroll { width:30px; line-height:50px; position:fixed; right:5px; top:100px; } </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/AVvXsEhg7Z-EUGw9IEwd0L2kO5_nzpha6rDMDvMy-7HXF8no2aaexL7doCCrnIujJE93r564PHWsuzIbhQc1x7-0TlAlnsKy7fJS7MA8w_Ammkzc3x0b1iceT0tPJuJPO7i5Ujvl29tx3Byb_p8/s1600/top-namkna-blogspot-com.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/AVvXsEjCw5JYkXRgWYkZwGXZYT_H7bsugwhlKAQpuY4B6SKkJfFnrmOh6a-_gUZlJvJb5GTuVcEx1lyDqAJ16o3B3I1BKvMFUNwiYTN9MDPESl4SLg2f76ylvujQMoBe5VXnuy3eCm4aFv3y7_s/s1600/back-namkna-blogspot.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='STOP'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh29O9HnizhI6V7xT6EvxkPgu_LEa0CdPmPQihvFBa-aD-kjHlNACnIMtpHvPKMXWOjB6QQ4I50c0uKG86LWEdIZdQ8f6-_0Aed5NVrHqgp-bEy8UA_CdXvDMLCjJALlV9XUrDgur9NrC4/s1600/play-pause-namkna-blogspot-com.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='DOWN'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXNM2edA1OzwYlFpKZJ8spNFLygY3EpK902POkiCn9H9WkFW-SxQdBs5Wu3ryR5i89AqbE-TksbTGNvIH8uBhxtJAR7baP2yC6ZOPtOKO_NNW3YjI18IPtmOjp01V-dJ2_Cf_juwPyu7c/s1600/gun-namkna-blogspot-com.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/AVvXsEj-qP0TPxNv1USBXT_A3PT89JM94p97cPuUW8rAgXuk10-aULObaf2jbwr3QUVcVMHL0KbTNHVVq2HfvDoB5FUR9RRuEbtxcU8rSUBusf6hqnLJgi_rsxvMHfrAuWbeeSq11IPatoY8CKE/s1600/bottom-namkna-blogspot-com.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- bấm Lưu Mẫu lại.
một số hình ảnh đẹp để thay
Tác giả: traidatmui.com
Nhận xét
gê gê
Trả lờiXóaanh nam, mình muốn nút lên từ từ thì mã code ntn vậy anh, cần gấp lắm đó
Trả lờiXóaa Nam ơi, làm sao để làm nút lên từ từ vậy anh ???????????? cần gấp
Trả lờiXóaEm xem bài này: Tạo nút Back to Top cho blogger với JQuery
Xóahoặc bài này nha: Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng
ví dụ như hình này https://lh4.googleusercontent.com/-HW6-lwAajuU/T35aO55KD8I/AAAAAAAAAOs/uWG9m072otc/s48/gun.gif thể hiện nút xuống từ từ, mà giờ mình muốn thêm nút lên từ từ nữa thì sao anh , nhập mã code thế nào vậy anh Nam?
XóaTrong bài viết này" Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng
XóaBạn Sủa đoạn:
<a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a>
<a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a>
thành
<a id="gotop" style="bottom: -50px; right: -50px;"><img class="decoded" src="LINK ẢNH LÊN TRÊN" /></a>
<a id="gobottom" style="top: 0px; right: 0px;"><img class="decoded" src="LINK ẢNH XUỐNG DƯỚI" /></a>
vậy mình có thể kết hợp lại bài Bảng điều hướng cho blogspot và Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng thành 1 thủ nhật đc đúng ko anh nam ? có xung đột gì về mã ko anh ?
Trả lờiXóaĐúng vậy đây thực chất là chỉ thay chữ viết thành link ảnh thôi mà còn các phần khác ta vẫn giữ nguyên bản gốc mà :)
Xóaanh nam ơi, em có gởi mail cho anh nhờ anh xem giúp dùm mã code đó anh nam, mail em là: vnnn.cp@gmail.com
Trả lờiXóaOke. Lát anh kiểm tra mail rồi trả lời e nha.
XóaBạn ơi, giúp mình với. Blog của mình chẳng hiểu sao trang chủ bị mất hết cả thanh cuộn ngang, dọc; thu nhỏ cửa sổ trình duyệt lại thì lại hiện ra thanh cuộn dọc; mà blog của mình thì nhất thiết phải có thanh cuộn dọc thì mới load được thêm hình. Bạn giúp mình fix lỗi này với. Mình cảm ơn. Blog của mình đây : http://giaybuy2go.blogspot.com/
Trả lờiXóaMình vào thấy nó rất bình thường mà bạn.
Xóa