Tombol Back to Top Roket Meluncur

6/06/2015
Tombol Back to Top Roket Meluncur

Tombol Back to Top Roket Meluncur - Pada postingan yang lalu Saya pernah berbagi cara memasang tombol smooth back top top di blog yang berfungsi sebagai tombol yang akan kembali ke halaman paling atas dari blog ketika tombol tersebut ditekan. Tombol ini berguna bagi pengunjung untuk melihat kembali konten atau menu yang ada di atas secara singkat dan ditambah dengan efek animasi yang menarik.

Yang berbeda dari tombol back to top yang pernah Saya bagikan, tombol ini mengunakan gambar roket yang meluncur dengan diberi sentuhan animasi efek api saat tombol diklik. Bagi yang ingin mencobanya, silakan ikuti langkah berikut ini :

1. Buka Blogger > Klik Template > Edit HTML > Cari kode ]]></b:skin> atau </style> kemudian salin kode di bawah ini tepat di atasnya

/* 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)}

Biar aman, simpan gambar di direktori masing-masing :

http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png

2. Selanjutnya, Salin kedua kode di bawah ini simpan tepat di atas </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>

3. Simpan dan lihat hasilnya.


Demikian cara penerapan Tombol Back to Top Roket Meluncur di blog, selamat mencoba.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

11 comments

Wahahahaha. kereeen mbak. gokil roketnya. Ane suka :D
Thanks mbak arlina. Izin pasang di blog :)

Balas

Cara masang tombol back to top roket dan neganti tombol back to top yang lama di template G Vusion 2 gimana ya mbak? Cara benernya. Soalnya pas ane pasang jadi ngerusak menu yang di atas, jadi gak bisa berjalan dengan semestinya. Padahal ane kepincut banget sama tombol back to top roketnya, keren. Cek Optimasi Droid

Balas

Cara pasang dan ngeganti tombol back top lama di template G Vusion 2 gimana mbak? Cara benernya, soalnya pas ane pasang malah ngerusak menu yang diatas, jadi gak berjalan dengan semestinya.

Balas

Hapus dl tombol back to top lama

Balas

Udah, tapi fungsi sticky pada menu-wrapper jadi gak berfungsi.

Balas

bagus ni, coba dimodifikasi gambarnya :D

Balas

Coba pindahkan posisi tiap script diatas atau di bawah kode lain

Balas

Iya sob, silakan kreasikan kembali

Balas

wah bagus banget nih, back to topnya pake roket, keren, Izin pasang y mba Arlina.
kunjungi juga blog saya y mba Arlina >> www.turiswangamers22gtr.blogspot.com
Thanks. :)

Balas
This comment has been removed by the author.

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.