Cara Membuat Tombol Back to Top Roket Meluncur

- Pada Postingan Kali Ini Saya Akan Berbagi Cara Memasang Tombol Back to Top Roket Meluncur yang berfungsi sebagai tombol yang akan membuat anda kembali ke halaman paling atas dari Blog ketika tombol tersebut di tekan. Tombol ini berguna bagi anda yang akan melihat kembali konten atau menu yang ada di atas secara cepat dan di tambah dengan efek animasi yang lumayan menarik.
 

Cara Membuat Tombol Back to Top Roket Meluncur

Yang membedakan tombol yang akan saya bagikan  dengan tombol Back To Top Lain Adalah Tombol yang akan saya bagikan Lebik Menarik Karna ada Efek Animasi Roket Meluncur Dengan Sentuhan Efek Api Saat tombol Tersebut di klik. Bagi Yang ingin Mencobanya Silahkan Ikuti Langkah-langkah Berikut ini :

1. Buka Blogger > klik Template > Edit HTML > Cari Code ]]></b:skin> atau </style> Kemudian Copy Code Di Bawah Ini Dan Simpan 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 Directory 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 Liat Hasilnya.Demikian Tutorial Tentang Bagaimana Cara Membuat Tombol Back to Top Roket Meluncur .

Tweet

Cara Membuat Tombol Back to Top Roket Meluncur

4/ 5

Oleh Unknown

Ditulis Unknown Pada 6:51 PM Komentar