Rocket Back To Top cho blogspot
Chào các bạn!
"Bach To Top" là một tiện ích rất phổ biến nhất là ở nhưng trang báo, bài viết dài. Nhấn vào "Back To Top" là phi thẳng lên đầu trang luôn khỏi phải dùng tay gạt gạt chi cho mỏi.

Có rất nhiều kiểu Back To Top, hôm nay toptienich xin hướng dẫn các bạn chèn kiểu Rocket, hình tên lửa của Nasa phi thẳng lên bầu trời. À quên là bài này mình có tham khảo tại Askwithloud.com bạn nào biết tiếng Anh thì ghé qua nha! Ở bài nay Mình diễn đạt theo cách dễ hiểu nhất cho các bạn!

Cách chèn Rocket Back To Top vào blog.
Bước 1: Coppy đoạn mã sau và chèn nó lên trên (trước) thẻ ]]></b:skin>
/* Back to Top Roket meluncur */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bvE6ff8YbJENicnecFSVh1SHqPoJ9uCf8sTB299p38Miee47A7ReMNDMvvDpOJ6q-G5dICyz6pzuUaFP7ir7EiEyviSkf6iXsNZU1cEj-v55k2YycuvSOGUpNfIlweOhw6N2voaWgYYD/s1600/Ask.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)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bvE6ff8YbJENicnecFSVh1SHqPoJ9uCf8sTB299p38Miee47A7ReMNDMvvDpOJ6q-G5dICyz6pzuUaFP7ir7EiEyviSkf6iXsNZU1cEj-v55k2YycuvSOGUpNfIlweOhw6N2voaWgYYD/s1600/Ask.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}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.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}
#rocketmeluncur.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)}
Bước 2: Coppy và chèn đoạn mã HTML/jQuery lên trước thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),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("#rocketmeluncur").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>
Bước 3: Lưu mẫu lại và thưởng thức thôi.
Chúc các bạn thành công! Và nhớ ghé thăm blog thường xuyên nhé!