Back to top - Một tính năng rất cần thiết cho mọi blog, nó là phần không thể thiếu khi làm blog. Bởi nó giúp chúng ta về trở về phần trên của trang bài viết mà không cần phải kéo chuột hay lăn chuột. Đặc biệt trong giao diện điên thoại thì nó rất cần thiết. Bởi không ai muốn vào trang mà không có nút Back To Top bắt họ phải kéo dưới lên. Hôm nay mình sẽ hướng dẫn các bạn tạo nút Back to top cho blogger - blogspot.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao     

Mục Đích

•          Back To Top giúp chúng ta lên phần trên của bài viết một cách nhanh chống mà không kéo chuột hay lăn chuột.
•         Tạo sự thích thú của người xem bởi độ ngầu của nó. 
•         Giúp cho blog phát triển, đẹp hơn nhiều

Thực Hiện

1. Các bạn vào  Mẫu ---> Chỉnh sửa HTML sau đó copy và chèn đoạn CSS sau trước thẻ ]]></b:skin> hoặc </style>

CSS/* Back to Top Roket Slide */
#scrolltop{display:none}
#rocketslide{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketslide i{display:block;margin-top:48px;height:14px;background:url(http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketslide:hover{background-position:50% -62px}
#rocketslide:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketslide.showrocket{visibility:visible;opacity:1}
#rocketslide.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketslide.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Chú ý: link màu đỏ http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png các bạn có thể tải về upload lên host lưu trữ của riêng mình hoặc để vậy cũng được. Nếu bạn có tay nghề vể đồ họa thì có thể vẽ lại cái khác rồi upload lên host riêng rồi thay thế link đó bằng link của bạn 

2. Sau đó tìm thẻ </body> rồi copy đoạn html sau và paste vào trước thẻ </body>

HTML<a href="javascript:void(0);" id="rocketslide" class="showrocket" ><i></i></a>

3. Tiếp tục copy đoạn Javascript  sau và paste vào trước thẻ </body>

JS<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketslide").slideUp(500):jQuery("#rocketslide").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketslide"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketslide").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

4. Save Template (Lưu Mẫu) lại và thưởng thức thành quả.

Nâng Cao

• Các bạn có thể thay link màu đỏ http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png thành link của bạn .
• Ngoài ra nếu bạn làm trên blog chưa hề có Back to top thì ko sao. Nhưng nếu bạn mod lại theme của internet chia sẽ thì đôi khi bạn sẽ bị trường hợp như sau:

Cách Fix: tại code css dưới (giống ở trên )

CSS/* Back to Top Roket Slide */
#scrolltop{display:none}
#rocketslide{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketslide i{display:block;margin-top:48px;height:14px;background:url(http://lh3.googleusercontent.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketslide:hover{background-position:50% -62px}
#rocketslide:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketslide.showrocket{visibility:visible;opacity:1}
#rocketslide.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketslide.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Các bạn chú ý đến dòng code màu xanh lá cây: này z-index:7, các bạn thay số 7 thành số lớn hơn như 69 hoặc 6969 hoặc 696969 hoặc 1 tỉ cũng được. Nếu thấy số nào đúng thì save template lại

• Lỗi thứ hai: đó là bạn làm được nhưng hình ảnh lại bị mất, cụ thể là cái lửa phụt ra từ tên lửa.

Fix: Các bạn tải hình ảnh về sau đó up lại lên host của mình  

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Nút Back To Top Hình Tên Lửa Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công