Cara membuat Back To Top Dengan Efek Bounce pada Blogger

Baca Juga

Cara membuat Back To Top Dengan Efek Bounce pada Blogger - Mungkin sudah enggak asing lagi bagi para blogger semuanya, kali ini saya akan menjelaskan lagi tutorial Back To Top menggunakan Efek Baounce dan pada postingan sebelumnya saya juga sudah menerangkan Tombol Smooth Back To Top dengan Jquery dan CSS . Efek Bounce ini sangat lah bagus menurut saya enggak salah kalau anda ingin mencobanya / memasang pada blog anda. Di bawah ini saya akan menjelaskan bagaimana cara memasangnya.

Langkah-Langkah

1. Pertama-tama masuk ke blogger dashboard dulu
2. Kemudian masuk ke Template > Edit HTML
3. Lalu cari kode </head> (gunakan ctrl+f untuk memudahkan pencarian), 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'/>
NB : Jika pada blog anda sudah terpasang jQuery maka lewati saja pemasangan code diatas.

     4. Salin dan letakkan lagi kode dibawah ini tepat diatas kode </head>

<!-- Bounce to top -->
<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>
<!-- End -->

     5. Cari kode ]]></b:skin>, salin dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/* Bounce to top
---------------------------*/
#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;}

Setelah itu save pekerjaan anda pada edit tampilan HTML ini. Lalu langkah selanjutnya yaitu masuk pada Tata Letak blog anda & tambah widget baru dengan mode HTML/JavaScript dan Salin code dibawah ini.

<!-- BounceToTop -->
<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>

Setelah menambah widget baru silahkan simpan pekerjaan anda dan lihat hasilnya pada blog anda, jika dari atas menerapkannya benar maka Efek Bounce pada blog akan dapat digunakan.
Dan sekian postingan dari saya semoga postingan ini dapat bermanfaat bagi pengguna dan pembaca khususnya sobat blogger semua.