Cara Mudah Membuat Tombol Back to Top dengan Efek Bounce

Cara Mudah Membuat Tombol Back to Top dengan Efek Bounce

Membuat Tombol Back to Top atau tombol kembali ke atas pada blog memang lah sesuatu yang harus di terapkan di halaman kita, dengan memasang tombol ini akan membuat pengunjung tidak harus lagi untuk menarik scrool ke atas lagi agar bisa kembali ke teks awal, nah cara yang akan saya bagikan berikut ini sangat berguna untuk mempermudah pengunjung blog anda nantinya untuk scrool keatas di semua halaman blog anda, karena dengan menekan tombol ini anda akan dibawa ke halaman atas otomatis tanpa menarik scrool lagi Dan jika anda belum menerapkan tombolnya dan merasa tertarik untuk memasangnya, di bawah berikut akan saya bagikan cara penerapanya untuk blog anda.
Cara Membuat Tombol Back to Top dengan Efek Bounce

Cara Membuat Tombol Back to Top

1. Masuk ke akun Blogger anda.
2. Kemudian Pilih Template => Edit HTML
3. Cari kode </head> dan letakkan kode jQuery ini tepat diatas kode </head> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
(Lewati langkah ini jika blog anda sudah Terpasang kode jQuery) 4. Selanjutnya Letakkan lagi kode dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
5.  Lalu letakkan kode dibawah berikut tepat diatas kode ]]></b:skin>
#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}
6. Terakhir masuk ke Tata Letak => Tambahkan Gadget => Lalu Pilih HTML/Javascript dan masukkan kode dibawah ini ke didalamnya atau selain cara tambah gadget, anda bisa juga memasukkan kode dibawah tepat di atas kode </body>
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id="BounceToTop" style="display: block;"></div>
7. Simpan dan lihat hasilnya, semoga bermanfaat !

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »