Cara Membuat Tombol Back to Top Roket Meluncur

Cara Membuat Tombol Back to Top Roket Meluncur - Hallo sahabat Teknologi Terbaru, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Back to Top Roket Meluncur , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Belajar SEO, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Back to Top Roket Meluncur
link : Cara Membuat Tombol Back to Top Roket Meluncur

Cara Membuat Tombol Back to Top Roket Meluncur

hai sobat warungbiru, kali ini mimin akan share cara membuat tombol back to top. yang fungsinya ketika sobat klik maka sobat akan dibawa kembali ke halaman awal, tombol ini juga berguna untuk memudahkan pengunjung untuk melihat kembali konten konten dari awal lagi.

kali ini mimin mau bagi tombol back to top model roket bila sobat tekan akan memunculkan efek animasi berupa api pada bagian bawah roket. yuk simak cara caranya di bawah ini.

Cara Membuat Tombol Back To Top Roket

1. buka dahulu blog sobat > Template > Edit HTML
2. Tekan CTRL + F > cari kode ]]></b:skin> atau </style> 
3. kemudian copy kan kode dibawah ini tepat diatas kode tersebut.

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

4. Selanjutnya sobat copykan lagi kode dibawah ini tepat diatas 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>

5. kemuadian simpan dan lihat hasilnya (y)

Selamat mencoba ya sobat. demikian artikel mengenai Cara Membuat Tombol Back To Top semoga blognya semakin cantik dan tidak kalah keren dengan blog saya

Demikianlah Artikel Cara Membuat Tombol Back to Top Roket Meluncur

Sekianlah artikel Cara Membuat Tombol Back to Top Roket Meluncur kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Tweet