How To Add Back To Top Button [Rocket Style ] In Your Blog

In order to make your blogger website more professional and attractive, you can add some extraordinary gadgets or pages. In this post, I will show you how to add back to the top button on your blogger website. Back to top button is very essential for every blogger or website. This will also helpful for the visitor to easily navigate into your site and indirectly these things it will also increase your traffic.

Steps to add you back to top button

🚀 Go to your blogger dashboard- Login
🚀 Now go to your "theme" section on left most (sidebar), then click on "customize" button
🚀 Then click to "Advanced" option then click "Add CSS" (Last Option)

🚀 Then copy the code below and paste in Add custom CSS box

Code for Add CSS

/* 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/AVvXsEh3uE1spi5CRT5YG2O0NOC_kIDFzCwzcf0YUsqVCc90tBvXmUwuv9_vRcefSmux_H0oQgNidzaUt_n-lXkeGOcWxupc6tEtvciKhQlLLH0wSSo6mB_4Vd8n9x97isYPV0gAxJ-ycT5QC6B1/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/AVvXsEh3uE1spi5CRT5YG2O0NOC_kIDFzCwzcf0YUsqVCc90tBvXmUwuv9_vRcefSmux_H0oQgNidzaUt_n-lXkeGOcWxupc6tEtvciKhQlLLH0wSSo6mB_4Vd8n9x97isYPV0gAxJ-ycT5QC6B1/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 Go back to blogger and click "Edit HTML"

🚀 Now click anywhere in HTML code are and press "ctrl + F" from your keyboard, a search box appear, find their code </body>

🚀 Now copy the code below and paste it just above </body>

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

🚀 Now copy the code below and again paste it just above </body>

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