Hi mọi người, sau những ngày lễ rảnh rỗi mình đã thay đổi giao diện blogger hiện tại từ một giao diện cũng khá ổn sang giao diện mình tự design và tối ưu cũng khá ổn đối với bản thân chứ chưa thực sự ok với mọi người.
[BLOGGER] Hiệu ứng lên đầu trang cho blogspot mới nhất 2024
Và mình đã thêm nhiều thứ vào giao diện hiện tại của mình và mình cảm nhận được hiệu ứng lên đầu trang (back to top) nhìn khá vui nên hôm nay mình sẽ chia sẽ cho mọi người được biết và mọi người áp dụng cho blog của bạn thân để có một giao diện đẹp mắt nha.
Chúng ta bắt đầu thôi.
Bước 1: Các bạn thêm đoạn mã CSS bên dưới vào trong giao diện của các bạn nhé.
#mybacktotop {
background: url(https://csdl.hung.pro.vn/ICON/back-to-top.png) 0 0 no-repeat;
height: 130px;
width: 72px;
padding: 5px;
position: fixed;
bottom: 5px;
right: 5px;
cursor: pointer;
transition: none;
z-index: 15;
}
#mybacktotop:hover {
background: url(https://csdl.hung.pro.vn/ICON/back-to-top.png) no-repeat;
background-position: 0 -142px;
}
Ở phía trên có 2 đường link mình bôi đỏ, đó là hình ảnh như ở giao diện mình đang sữ dụng. Mọi người có thể tải về lưu trử trên hosting riêng hoặc cơ sỡ dữ liệu riêng của các bạn nhé. hoặc sữ dụng trực tiếp luôn của mình nhé.
Bước 2. Mình thêm đoạn code
Javascript bên dưới vào trên khung </body> nhé.<script type="text/javascript">
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#mybacktotop").removeAttr("href");$("#mybacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#mybacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#mybacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
Và cuối cùng đễ gọi thủ thuật đó ra blog của các bạn thì sữ dụng đoạn mã này để gọi ra nhé.
<a href="#" id="mybacktotop"></a>
Như vậy đã hoàn thành xong việc thêm tiện ích trở về đầu trang cho blogspot rồi nhé.
Lưu lại giao diện và tận hưởng kết quả thôi nhé mọi người, và demo giao diện đó mình đang sữ dụng, mọi người cỏ thể xem tại trang blog này của mình.