Rocket Back To Top Button For Blogger

How to Add Rocket roll back to top widget in blogger- At this time, Back to top button is very important for every blog or website. Because with the help of this button readers are easily reached at the top of the post in one single click. This widget/Button is cool because is save some time to go up and down. And the best part is it slides like an animated rocket fire effect. If you satisfied with this widget, and you want to add this button to your own blog. Then follow the below instructions and add this widget into your blog.

How To Add Rocket Back To Top Button in Blogger?

Go to you blogger dashboard - Login
Now go to the "template" section and then click on the "Edit Html" button.
After that, find the below code by pressing " Ctrl + f " key from your keyboard.

]]></b:skin>

Now copy the below code and paste it just before ]]></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/AVvXsEjPs12u85EwOsxW_Ew2pgf2EHBZjpuecth9BvqUuMHr32xtjJpicc-FGlBiMO-W4AERQBiCJAjQPO_qH0UIzmaragS6bM7fnXk4iy9Gw0DVtZGEreSG4tcwUSV66RVY5uNlaHjLDYEvALdB/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/AVvXsEjPs12u85EwOsxW_Ew2pgf2EHBZjpuecth9BvqUuMHr32xtjJpicc-FGlBiMO-W4AERQBiCJAjQPO_qH0UIzmaragS6bM7fnXk4iy9Gw0DVtZGEreSG4tcwUSV66RVY5uNlaHjLDYEvALdB/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)}

Now copy and paste the below HTML/jQuery codes just before </body>

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

After that, click on the orange save template button to make changes.

Result

That's it ! I hope you like this widget ! Stay tuned for more blogger widgets, tips and tricks ! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES