16 Desember 2015

Cara Membuat Tombol Back to Top dengan Efek Roket Meluncur

Cara Membuat Tombol Back to Top dengan Efek Roket Meluncur
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.


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>

Tentang Penulis

Artikel Terkait

3 komentar

Komentar Sobat yang masuk akan di Moderasi (tinjau) dan Kami proses untuk di Balas.
Terima Kasih untuk tidak Menggunakan SPAM dalam Komentar :)

wah kayaknya bisa dicoba di blog saya nih
nice post mas (y)

scripts kepotong bos

Agan copas dulu semua script-nya, lalu paste di notepad.
Nanti Script yang kepotong otomatis ikut ke copy :)

HiStats

Formulir Kontak

Nama

Email *

Pesan *