Chào bạn! có phải bạn đang tĩm mã code Back to top (lên đầu trang) cho blogger (blogspot) đẹp mà bất cứ một website blog nào đều cần phải có.
Nếu bạn để ý thì tất cả các website blog mà mình sử dụng đều có Back to top để giúp chúng ta lên đầu trang một cách dễ dàng.
 |
| Nút Back to top cho website blogspot |
Cách thực hiện
- Bước 1: Bạn thêm CSS này trong thẻ </b:skin> hoặc trong thẻ </style>
.scroll--top{background:#00aeef;position:fixed;bottom:10%;right:20px;width:40px;height:40px;z-index:20;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;justify-content:center;border-radius:50%;border:1px solid #00aeef;transition:opacity 400ms ease 0ms}
.scroll--top:not(.show){opacity:0}
.scroll--top.show{opacity:1}
.scroll--top:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath fill='%23fff' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'%3E%3C/path%3E%3C/svg%3E");background-size:100%;content:"";width:21px;height:21px;display:inline-block;vertical-align:middle}
.scroll--top:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#03a9f4;outline:none!important}
@media(min-width:1025px){.scroll--top:hover{cursor:pointer}}
- Bước 2: Thêm HTML trước thẻ đóng </body>
<div aria-label='Back to Top' class='scroll--top' cond='!data:blog.isMobileRequest' role='button' tabindex='0'/>
<script>//<![CDATA[
const scrollTop=document.querySelector('.scroll--top')
window.addEventListener('scroll',function(){
if(this.pageYOffset==0)scrollTop.classList.remove('show')
else scrollTop.classList.add('show')
})
scrollTop.addEventListener('click',function(){
window.scrollTo({top:0,behavior:'smooth'})
})
//]]></script>
- Bước 3: Lưu và xem thanh quả
* Như vậy là mình đã chia sẻ xong cho các bạn một tiện ích rất cần thiết cho một website blog, nếu như bạn có thắc mắc gì thì vui lòng liên hệ với VeoSpot.com nhé!
Chúc bạn thành công!