Change 'Back To Top' Button to Moving Rocket Effect on Blogger/Blogspot

In this tutorial I want to show you 'How to give/change normal 'Back to Top' button to Moving-Rocket effect as you are seeing on my blog.

Step:1
Go to Blogger> Template > Edit HTML, Find this code ]]></b:skin></style>

After finding the above code, place the below code before the above code.

/* 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(http://1.bp.blogspot.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)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.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}
#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)}

Step:2
After the above step, copy the below HTML and J-query codes and place them before the "

tag in template editor.

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

<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>

Step:3
Click on the 'Save Template' button to save. And open your homepage to view the result.

Have any questions about this tutorial, feel free to ask me in the below comment section.
Feel free to share.