How to Make a Back To Top Button with Rocket Animation Effects

BloggerByte - Hey freiends today I will share a tutorial on How to Make a Back To Top Button with Rocket Animation Effects on a blog that functions as a button that will return to the top of the blog when the button is pressed and release the rocket animation effect.

This back to top button will make it easier for readers to return to the top page with just one click, this method is very influential for bloggers who have very long articles. What is different from this one button is, this button uses a picture of a rocket that glides with a touch of animated rocket effect.

How to Make a Back To Top Button with Rocket Animation Effects

Before you do the tutorial, please delete the default BACK TO TOP code of your template, so there is no conflict when applying this widget.

1. Please login to blogger.com using your Gmail.
2. Go to the menu THEMES » click Edit HTML
3. Find this code ]]></b:skin> and paste the code below right ABOVE the code.

/* Back to top By Bloggerbyte.net */

#back-to-top{color:#fafafa}

.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}

.back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}

.back-to-top:hover svg path{fill:#21ef8b}

.back-to-top svg{width:34px;height:34px;transition:transform .25s ease-out}

.tutop{color:#fafafa;font-size:1.4em;width:45px;height:45px;border-radius:100px;border:none;outline:0;background:#332d4f;z-index:999;bottom:20px;right:20px;padding:6px 9px;cursor:pointer}

4. Next, you simply put the appropriate code below, Just BELOW the code <footer>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>

<button class='tutop'><svg viewBox='0 0 29 24'>

<path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z' fill='#fff'></path>

</svg></button></a></div>

5. If you have please install the following JS code, Just Above the code </body>

<script type='text/javascript'> 

//<![CDATA[ 

//Back to Top By Bloggerbyte.net  

$(window).scroll(function(){200<$(this).scrollTop()?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").hide().click(function(){return $("html, body").animate({scrollTop:0},1e3),!1}); 

//]]>

</script>

6. If you have done above, click SAVE.

That's all this article about How to Make a Back To Top Button with Rocket Animation Effects for those of you who are still confused or have other questions about bloggers, please comment in the comments column below this article.