Cara Membuat Tombol Back to Top

June 15, 2015

Selamat malam sobat BagasUnix, Kali ini saya akan berbagi tutorial mengenai Cara Membuat Tombol Back to Top mungkin para blogger lainnya sudah pernah berbagi tutorial ini, namun apa kalanya saya berbagi kembali :D

Saya mendapatkan tutorial ini dari mba Arlina, jadi script/kode tersebut bukanlah buatan saya. Mohon maaf kalau ada pertanya yang saya tidak mengerti silahkan tanya langsung ke mba Arlinanya :D

Bagi yang beringinnan mencoba silahkan ikuti langkah-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 enak dan tidak error gambarnya, mendingan 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 lihatlah hasil yang tadi kita buat :

Demikianlah Tutorial yang saya bagikan, untuk kurang lebihnya mohon maaf ya :D

Source : http://arlinadesign.blogspot.com/2015/06/tombol-back-to-top-roket-meluncur.html

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.

Disqus
Tambahkan komentar Anda

5 comments

Gan cara membuat post yang ada kategorinya dimana seperti blog ini.
Contohnya seperti hacking lalu dibawahnya ada postnya.

Balas

Coba sob, baca dokumennya dengan teliti ^_^
Isi dokumennya lengkap qok

Balas

Kalo buat iklan melayang sama postingan pertama besar diatas sendiri kayak blog ini dimana ya?.

Balas

Dan kalo buat komennya ada tulisan admin itu gimana ya?.

Balas

Iklan melayang ada sob di google banyak caranya :D
Kalau itu ada qok di dokumennya ^^

Balas

Mohon berkomentar yang relavan dan tidak menaruh link hidup yah ^_^