Home
Blogger Guide
Coding Guide

Discover How to Add Floating Back to Top button on Blogger with Rocket Animation Effect

Hi Dude, Let See "How to Add Floating Back to Top button on Blogger" in this Article. The back-to-top button on most blogger themes today is not exactly the same but they are not attractive.

You may think that Back to Top is not a thing but the truth is it is not. Your website should be all the better for the experience of the users who come to your website.

So on this page, we will see about how to make a back to Top button attractive to fit your website.

What is the Back to Top button?

The Back to Top button on the website helps you navigate directly from the bottom to the top. It is used extensively on your webpage.

This means that if the size of your page on your website is large then the user will scroll it and if he wants to come to the beginning from the middle or end of the page then it is too late for him to scroll from the bottom to top.

But if the user clicks this button on your website, this button will automatically take you to the beginning of your webpage. This is the feature of this button.

How to Works?

This Back to Top button will float to the bottom left on all pages of your website. And your website will automatically resize to the size of the device being operated.

So you do not need to worry about reducing its size. This button comes with animation. That means a rocket rear will appear on this button. The rear of this rocket is tilted to the left.

The dependent rocket turns directly when the key is pressed on that button. This means moving the page upwards. Now we think you know how this button works.

You want to download this Script page please click the download button and Download All Filles into your Device storage

How to Add Back to Top button on blogger Step by Step

Step 1: Please go to your blogger Dashboard

Step 2: Select theme Section blogger Dashboard

Step3: Click the Edit HTML button on the blogger

Step 4: Find ]]></b:skin> tag on blogger Script

Step 5: Copy the CSS Script on Downloaded file and Paste Above on ]]></b:skin> Tag.

/* Back to top By pixabin.com */
#pixabin-back-to-top{color:#fafafa}
.pixabin-back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:998}
.pixabin-back-to-top:hover svg{transform:rotate(-45deg);margin:-1px}
.pixabin-back-to-top:hover svg path{fill:#21ef8b}
.pixabin-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}

Step 6: Next find the <footer> Tag on blogger Script and Copy the HTML script in the Download file on your Dashboard.

<div class='pixabin-back-to-top'><a href='#' id='pixabin-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>

Step 7: Copy the HTML Script on Downloaded File and Paste the HTML Script on <Footer> Tag.

Step 8: Next, Find the </body> Tag on the Blogger Template Script

Step 9: Copy the Java script at Downloaded File and paste above on </body> Tag. 

<script type='text/javascript'> 
//<![CDATA[ 
//Back to Top By Pixabin.com  
$(window).scroll(function(){200<$(this).scrollTop()?$("#pixabin-back-to-top").fadeIn():$("#pixabin-back-to-top").fadeOut()}),$("#pixabin-back-to-top").hide().click(function(){return $("html, body").animate({scrollTop:0},1e3),!1}); 
//]]>
</script>

Step 10: Save your blogger Template

Step 11: Well done. All Steps Finished Successfully.

Final Words

Friends this (How to Add Floating Back to Top button on Blogger) is finished on this Step. We hope this How to Add Floating Back to Top button on Blogger Script will be very helpful for your website. If you encounter any problem with this Contact page Script please let us know in the comment below. Our website always needs your support. So please share this blog as much as possible. And follow this website on Google News.

Post a Comment