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

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>


//

jQuery(window).scroll(function(){jQuery(window).
scrollTop()
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)});

//]]>

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

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

via Blogger http://www.droidadda.org/2017/03/change-back-to-top-button-to-moving.html https://mtkdr0id.files.wordpress.com/2017/03/c9174-back2bto2btop2beffect.jpg?w=300

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s