Cara Mudah Membuat Back To Top Dengan Efek Bounce

Back to top nya disamping gambar | Image Courtesy of : (DOKUMEN PRIBADI)

Bissmillahir Rahmannir Rahim. Assalmmu'alaikum Warahmatullahi Wabarakatuh. Halo agan-agan semua, kembali lagi di blog ane. Kali ini kita bahas tema tentang tutorial blog gan. Langsung menuju TKP.

Apaan sih back to top itu?

Back to top adalah sebuah tombol kembali ke atas yg digunakan website supaya memudahkan pengunjungnya untuk kembali ke atas.

Jadi definisi singkatnya back to top itu tombol kembali keatas.

Nah disini ane bakal bahas cara membuat membuat tombol back to top beserta efek bounce nya. Oke gan perhatiin baik-baik ya caranya :

1. Buka blog agan, klik template, lalu klik edit html

2. Klik sembarang dulu di text areanya, abis itu klik Ctrl + F, (jika sudah muncul form pencarianya di samping kanan atas textareanya) lalu ketik </style> dan tekan enter. Bagi yg gak tau caranya liat gambar dibawah ini :

Image Courtesy of : palingserbagunaku.blogspot.com

3. Setelah itu, copy kode dibawah ini, lalu paste di atas kode </style> :

/* CSS Back To Top */
#BackToTop {background:#fff;display:none;color:#fafafa;padding:15px 8px;font-size:16px;
line-height:30px;border-radius:100% 0 0 100%;box-shadow:0 0 5px rgba(0,0,0,0.3);transition:all .3s linear;}
.BackToTop {-webkit-transform: translateZ(0);cursor:pointer;position:fixed;bottom:25%;right:0;z-index:90;}
#BackToTop .fa.fa-arrow-up {background:#a3dd94;padding:10px;border-radius:100%;transition:all .3s linear}
#BackToTop .fa.fa-arrow-up:hover {background:#3a414e;transition:all .3s linear}

4. Setelah itu, copy kode di bawaha ini, lalu paste di bawah kode </style> :

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

5. Setrlah cara 1 - 4 selesai, cari kode </body> (untuk caranya bisa dilihat di point ke 2)

6. Copy kode dibawah ini, dan paste di atas kode </body> :


<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BackToTop').fadeIn(); } else { $('#BackToTop').fadeOut(); } });
$('#BackToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchbutton').click(function(){
  $(this).toggleClass('active');
  $('.search-form').fadeToggle('normal');
});
});
//]]>
</script>

7. Masih di kode </body>. Setelah point ke-6 sudah dilakukan, copy kode di bawah ini, dan paste di atas kode </body> :

<div class="BackToTop">
<a id="BackToTop" style="display: none;">
<i class="fa fa-arrow-up"></i>
</a>
</div>

8. Klik Simpan Template. Dan... jreng-jreng, selesai!

Jika agan ada pertanyaan, silahkan kirimkan di kolom komentar yak!

Sumber : Di edit dari blog Click and Skip

Blog Rayhanar

Cara Mudah Membuat Back To Top Dengan Efek Bounce

Rayhan

Artikel Terkait