Cara Membuat Tombol Back to Top dengan Efek Roket Meluncur

Murli Mirza    12/16/2015    Blogger    Comment   

LEVATRA.com - Berbagai macam cara para blogger menanjakan pengunjungnya supaya betah berada di blognya seperti menerapkan template yang ramah pengunjung, memasang menu navigasi, menampakkan tampilan minimalis, desain warna yang unik, memasang tombol berlangganan dan tidak terkecuali tombol Back to Top yang biasanya terletak di bawah kanan layar.

Back to Top adalah dimana tombol yang ketika di klik oleh seseorang maka halaman blog tersebut meng-scroll otomatis ke tampilan paling atas pada blog tersebut, sesuai dengan namanya 'back to top' yang berarti kembali ke atas. Fungsi dari tombol tersebut yaitu untuk memudahkan pengunjung jika ingin kembali ke tampilan paling atas, tidak usah menggunakan scroll lagi, cukup klik tombol tersebut maka otomatis akan kembali ke tampilan paling atas.

• DEMO

Kini banyak blogger yang memodifikasi tombol back to top ini dengan berbagai macam efek seperti bounce yang akan memantulkan halaman blog, memodifikasi tampilan dengan css agar terlihat unik, dan juga menambahkan gambar pada tombol tersebut. Dan kali ini saya akan membahas salah satunya yaitu tombol back to top dengan efek roket meluncur, berikut tutorialnya.

Cara Membuat Tombol Back to Top dengan Efek Roket Meluncur

1. Pertama kalian buka Blogger.

2. Masuk ke Dashboard > pilih Template > Pilih Edit HTML.

3. Kemudian cari kode ]]><b:skin> dan letakan kode berikut dibawah kode ]]><b:skin>.

/* ========== BACK TO TOP EFEK 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://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(https://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)}

4. Selanjutnya cari kode </body> dan letakan kode berikut di atas kode </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>