Cara Membuat Tombol Back To Top Dengan Efek Bounce

Cara Membuat Tombol Back To Top Dengan Efek Bounce Ala Si Dickey - okeh agan-agan semua, kali ini saya akan share tutorial blog, yaitu cara membuat back to top, udah tau  kan back to top itu apa ? :D langsung aja cekidot....

Demonya Lihat Di Blog Ini

Okeh langsung aja disimak cara membuatnya
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'/>

*Lewati langkah ini apabila di blog anda sudah terpasang jQuery

4. Jangan disimpan dulu, 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. Masih belum selesai :D, cari kode ]]></b:skin> dan letakkan kode dibawah ini 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. Klik simpan
7. Langkah terakhir masuk ke Tata Letak > Tambah Gadget, dan masukkan kode dibawah ini didalamnya

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

*right:3px; adalah letak tombol back to topnya, silahkan di sempurnakan sendiri

8. Lihat perubahannya di blog anda

Sekian artikel dari saya mengenai Cara Membuat Tombol Back To Top Dengan Efek Bounce Ala Si Dickey, Semoga bermanfaat

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post