Tạo Nút lên đầu trang - Nút Button “Back to Top” cho Blogspot
Tạo Nút lên đầu trang -
Nút Button “Back to Top” cho Blogspot
Với Blogpost là nền tảng được miễn phí của Google, bạn có thể
tạo blog theo tùy thích. Khi đã có Blog để viết bài đăng trên đó, bạn thấy Blog
mình vẫn còn thiếu “Nút quay lên đầu trang” khi đọc đến giữa hay cuối bài viết.
Việc tạo nút khá dể dàng, với mình vẫn chưa biết thực hiện. Sau khi tra trên
Google và đã thực hiện được, minh xin chia sẻ để các bạn thực hiện cho Blogpost
của mình.
Nút lên đầu trang hay
nút Button “Back to Top” rất hữu ích với blogpost. Người đọc không cần phải rê
chuột có thể lên đầu trang nhanh chóng. Hãy cùng Blog cách tạo button “Back to
Top” cho Blogspot.
Hướng dẫn tạo Nút lên đầu
trang (Nút Button “Back to Top”) cho Blogspot
Bước 1:
- Đăng nhập vào trang quản lý Blogger.com -> Chủ đề -> Chỉnh
sửa HTML -> Copy toàn bộ code của HTML chép vào Word của bạn để lưu. Khi cần
Backup lại trang blog trước khi thực hiện nếu bị lỗi.
- Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>. Để tìm thẻ này bạn nhấn Ctrl + F rồi nhập vào -> Enter.
<link
href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
rel='stylesheet'/>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>. Tìm thẻ </body> tương tự như trên.
<style type='text/css'>
/* Sonar Effect */
@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0
5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0
10px 10px #fff,0 0 0 10px
#fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px
#fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px
10px #fff,0 0 0 10px
#fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
/* To top */
.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219,
0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0)
scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0)
rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}
.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}
.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0)
scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0)
rotate(0deg);transition:all .4s;}
.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}
.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s
infinite;animation:sonar-effect 1s ease-in-out .1s infinite}
.vikkatotop{bottom:20px;right:20px;}
</style>
<div class='vikkatotop hider'>
<i class='fa fa-angle-up'></i>
</div>
<script type='text/javascript'>
//<![CDATA[
// Back to top button
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return
$("html,body").animate({scrollTop:0},600),!1})});
//]]>
</script>
Bước 3: Chọn “Lưu” và xem lại Blog của mình
để tận thành quả.
Tóm lại: với 3 bước đơn giản chúng ta đã thực
hiện được “Nút lên đầu trang” hay nút Button “Back to Top” một cách dể dàng. Hãy
thực hiện bạn sẽ thành công.
Chúc các bạn thành công!
