Skip to main content

Cara Membuat Tombol Back To Top Dengan Efek Bounce

Cara Membuat Tombol Back To Top Dengan Efek Bounce

Kembali lagi di ViperGoy Blog. Pada kali ini saya akan membahas tentang Cara Membuat Tombol Back To Top Dengan Efek Bounce. Pasti anda telah menemukan Blog - Blog yang memiliki Back To Top / Kembali Ke Atas. namun, terkadang ada juga Back To Top yang dibilang 'KASAR', mengapa ? Karena Tombolnya secara tiba - tiba keatas, itu membuat nilai penampilan blog anda berkurang, nah, untuk menutupi itu semua, saya mempunyai Cara untuk Membuat Tombol Back To Top Dengan Lembut dan Pelan. Jika anda bingung dan penasaran mari kita praktekan. Cekidott....

Cara Membuat Tombol Back To Top Dengan Efek Bounce Di Blog :

1. Masuk ke Blogger Home kalian.
2. Kemudian pilih Template Edit > HTML.
3. Setelah itu cari kode </head>, Kemudian copy dan pastekan diatas kode </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').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>

4. Klik save / simpan.
5. Masuk ke Tata Letak > Add Gadget.
6. Pilih yang HTML/JavaScript.
7. Kemudian masukan kode dibawah ini :

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnYxFSFmkHsyZJHQ4FnvA8TFyiv19nL4TpWRdKVKPblFO7w8Dq-0Brko3i5gD8qM-n2oGe5fugSFA84WwX97oSFFHPlcq0nUmaQbLjEi0qRnWMoXq6TSG7CClwiwhXArAMFvFxNHI1rg4/s1600/Arrow+Up+ViperGoy+Blog.png'/></div>

8. Save / Simpan tanpa diberi judul.

Nah, begitulah Cara Memasang Tombol Back To Top Di Blog Dengan Efek Bounce. Saya berterima kasih kepada Blog KangIsmet karena sudah membuat Kode Back To Top tersebut. Jadi saya berterima kasih banyak dan jangan lupa membaca artikel vipergoy sebelumnya tentang

Sekian dari Paman ViperGoy untuk artikel yang berjudul Cara Membuat Tombol Back To Top / Kembali Ke Atas Di Blog (Bounce). Terima kasih

Comments

Popular posts from this blog

MEMBUAT BLOG DI TERIMA ADSENSE

Membuat blog langsung di terima Google adsense atau sekali daftar langsung diterima oleh Google Adsense adalah idaman para blogger pemula. Karena Masa depan dari para publisher adalah mendapatkan bayaran dari iklan yang di tempatkan di Blog. Saya pun dulu seperti itu . Ada semangat ngeblog ketika blog yg kita miliki terpampang iklan iklan dari GA.  Walaupun ada banyak situs pengganti google adsense yg juga bayar mahal namun GA tetap menjadi pilihan paling utama .  Google adsense masih menjadi Favorit di urusan mendapatkan penghasilan dari internet Baca Juga ; Alasan Blog Di Tolak Google Adsense Untuk bekerja sama dengan Google adsense ada ketentuan ketentuan dasar yg harus Blogger mania ketahui kemudian terapkan. Walaupun ada banyak cara untuk mendapatkan adsense, Baik itu youtube atau ad mob tetapi disini kita bicara tentang Google adsense di Blog. Ketentuan inilah yg nantinya akan menjadi kebijakan yg dinilai oleh google apakah Blogger mania mengikuti atura...

Cara Memperkecil / Mengurangi Pemakaian Memori RAM Mozilla FireFox Dengan Firemin

Cara Memperkecil Pemakain Memori RAM Mozilla FireFox Dengan Firemin Mozilla Firefox dikenal sebagai salah satu browser terpopuler di dunia. Banyak sekali pengguna FireFox yang menggunakan browser buatan Mozilla tersebut sebagai default Browser. Kelebihan dari browser FireFox ini memiliki banyak adds-on, cepat, dan juga memiliki banyak pilihan derivatif seperti CyberFox, Palemoon, Dan sebagainya. Namun, dibalik semua kelebihan tersebut, Firefox memiliki beberapa kelemahan. Salah satu kelemahan dan FireFox adalah penggunaan memori RAM yang cukup besar. Untuk pemakaian standar saja FireFox bisa tembus memakan RAM hingga mencapai kurang lebih 200 MB. Mozilla sendiri sudah berusaha meng- improve  browser miliknya, namun tetap saja masih terasa besar.  Tetapi sekarang kalian tidak perlu khawatir, karena sekarang sudah ada sebuah aplikasi portable yang dapat mengurangi / reducing  pemakain memori dari Mozilla Firefox. Aplikasi mini tersebut bernama Firemin.  Berikut adala...

Cara Mengganti Template Blog

Kembali lagi di ViperGoy Blog . Pada artikel ini, saya akan memberikan artikel tentang  Cara Mengganti Template Blog . Mungkin anda bingung dengan Mengganti Template Blog . Ya, pada tampilan baru blogger, memang sangat bingung untuk Mengganti Template Blog karena tempatnya sudah berubah - ubah. Namun, jangan cemas untuk para blogger yang ingin Mengganti Template Blogn ya. Caranya sangat mudah sekali, tetapi ikuti langkah-langkah yang ViperGoy berikan. Cekidot... Cara Mengganti Template Blog : Langkah Pertama : Silahkan Buka Link ini "  http://blogger.com/  " Langkah Kedua : Anda akan melihat tampilan seperti ini. ( Lihat Gambar ) Langkah Ketiga : Klik pada Menu Dropdown , dan pilih " Template ". ( Lihat Gambar ) Langkah Keempat : Setelah itu akan muncul tampilan seperti ini. ( Lihat Gambar ) Langkah kelima : Lalu, Lihat pada Kanan Atas kalian, ada tombol seperti ini. ( Lihat Gambar ) Langkah Keenam : Lalu akan muncul tampilan seperti ini. ( Lihat Gambar ) Ketera...