BACK TO TOP ok - THỦ THUẬT
BACK TO TOP CHO BLOGER
Tiện ích nút
Back To Top rất có ích cho độc giả blog của bạn ở những bài viết dài vì có thể
dễ dàng tiết kiệm thời gian cho việc mất công phải kéo thanh cuộn lên đầu
trang.
Các bước tạo nút Back
To Top
Bước 1: Các bạn vào chế độ chỉnh sửa HTML và thêm vào trước
thẻ đóng ]]></b:skin> đoạn CSS sau:
#backtotop {height: auto;width: auto;position: fixed;bottom: 15px;right: 20px;background-color:#A5D16D;margin:0;padding:15px;border-radius:10px;border-bottom:4px solid #78994e;}
#backtotop:hover{background-color:#90b85c;border-bottom:2px solid #78994e;}
Bước 2: Tìm thẻ đóng và thêm vào trước nó đoạn JS bên dưới:
PASTE MÃ SAU TRƯỚC THẺ </BODY>.
Bấm CTRL + F viết </body> rùi paste trước </body>.
<script
type='text/javascript'>//<![CDATA[
window.onload=function(){
var appended = false, top = document.createElement("a");
top.href = "#";
top.id = "backtotop";
top.innerHTML = "<img alt='Trở về đầu trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3WSUEItsEf8bDM_ZcOOMvljxVurs-67e-pGuEKbqW6SzyP-kd-NC8PEEt62LXUPR8y-ogo_NvqAnnfcqxT1p3wfJ5RsxCXLgdnuD5_y3CBgomDmUT7v4V_xFh6WWyN6fQ5xXecFiC_XT/s1600/12.jpg'/>";
window.onload=function(){
var appended = false, top = document.createElement("a");
top.href = "#";
top.id = "backtotop";
top.innerHTML = "<img alt='Trở về đầu trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd3WSUEItsEf8bDM_ZcOOMvljxVurs-67e-pGuEKbqW6SzyP-kd-NC8PEEt62LXUPR8y-ogo_NvqAnnfcqxT1p3wfJ5RsxCXLgdnuD5_y3CBgomDmUT7v4V_xFh6WWyN6fQ5xXecFiC_XT/s1600/12.jpg'/>";
onscroll
= function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
if (!appended) {
document.body.appendChild(top);
appended = true;
}
} else {
if (appended) {
document.body.removeChild(top);
appended = false;
}
}
};
}
//]]></script>
Vậy là xong!
No comments
Post a Comment