Hiện nay rất nhiều cách để tạo nên tạo nên nút lên đầu trang hay được gọi là Scroll To Top cho blogger. Không giống như các tùy chọn khác dựa trên Jquery, mình đã phát triển nút này lên đầu trang chỉ sử dụng javascript thuần túy.
Một số Scroll To Top cho blogspot hiện nay rất nhiều và nó đều dựa trên thư viện Jquery để chạy, nếu không có Jquery thì nút lên đầu trang cho blogger sẽ không xuất hiện thì bây giờ mình sẽ hướng dẫn bạn cách tạo nút tải lên đầu trang mà không cần thư viện Jquery nhé và bạn cũng có thể xem cách khắc phục ảnh bị mờ trên blogger
Hướng dẫn tạo nút Scroll to top cho blogspot
Từ bảng điều khiển quản trị Blogger, đi tới Chủ đề> Tùy chỉnh> Tùy chọn nâng cao> CSS tùy chỉnh và tại đây chúng tôi sẽ dán mã css. Hoặc thêm Css Vào <b:skin>
Bây giờ chúng ta sẽ đề cập đến Chủ đề > Chỉnh sửa HTML , rồi tìm </body> rồi đặt ở trên
.scrollToTop {outline: none;border: none;font-size: 14px;cursor: pointer;}.scrollToTop svg {display: block;}.scrollToTop {position: fixed;opacity: 0;visibility: hidden;-webkit-transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s;transition: transform .3s, visibility .3s, opacity .3s, background .3s, -webkit-transform .3s;-webkit-transform: translateY(-2em);transform: translateY(-2em);}.scrollToTop.visible {visibility: visible;opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}
.scrollToTop svg {
fill: #FFFFFF; /* color */
}
.scrollToTop {
background-color: rgba(0, 0, 0, 0.85); /* color de fondo */
box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 1px 7px rgba(0,0,0,0.25);
bottom: 1em;
right: 1em;
padding: .5em;
border-radius: 4px;
}
.scrollToTop:hover {
background-color: rgba(0, 0, 0, 0.95);
}
Sau đó chúng ta lưu lại hoặc áp dụngBây giờ chúng ta sẽ đề cập đến Chủ đề > Chỉnh sửa HTML , rồi tìm </body> rồi đặt ở trên
<!-- HTML-->
<button id="scrollToTop" class="scrollToTop">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24">
<path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</button>
<!-- Javascript -->
<script>//<![CDATA[
var scrollToTop = (function() {
var showButton = 600,
scrollSpeed = 1000;
function scrollTop(b) {
function a(d) {
c += Math.PI / (b / (d - e));
c >= Math.PI && window.scrollTo(0, 0);
0 !== window.scrollY && (window.scrollTo(0, Math.round(scrollTime + scrollTime * Math.cos(c))), e = d, window.requestAnimationFrame(a))
}
var scrollTime = window.scrollY / 2,
c = 0,
e = performance.now();
window.requestAnimationFrame(a)
}
var scrollPosition = window.scrollY,
scrollButton = document.getElementById("scrollToTop");
window.addEventListener("scroll", function() {
scrollPosition = window.scrollY;
showButton < scrollPosition ? scrollButton.classList.add("visible") : scrollButton.classList.remove("visible")
});
scrollButton.onclick = function() {
scrollTop(scrollSpeed)
}
})();
//]]></script>
Sau đó các bạn lưu lại.