Cara Membuat Back To Top dengan Effect Bounce | Blog Krizeer

Sore sobat Blog Krizeer, pada kesempatan kali ini saya mau membahas tentang Cara Membuat Back To Top dengan Effect Bounce.
Mungkin sobat semua udah gk heran dengan Judul Blog Ini.

Ok langsung aja kita bahas satu per satu !!!

1. Cari kode ]]></b:skin> lalu letakan kode ini di atas kode tadi
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}
2. Cari kode </head> dan letakkan script di bawah ini di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() &gt; 100) { $(&#39;#toTop&#39;).fadeIn(); } else { $(&#39;#toTop&#39;).fadeOut(); } });    $(&#39;#toTop &gt; img&#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>
3. Simpan Template
4. dan pergi ke edit laman ambil tambah gadget dan ambil HTML/JAVASCRIPT lalu letakk kan kode di bawah ini
<div id='toTop'><!-- Back to top animation written by farizemo | edited by Yoga Pratama --><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOZYDenzI3tRjziTeWmWCSSyoGJs_sDHLQgwh_Sd3TcwKXj3W1ubOdbtg5pHZyoL0Fob556-LM8xgT87eo4K2bd3mhX6qGtbJhZYEpDFlm7YgrONFJd5zl79k0ghj5Kw3jaCnpUuUCvOq/s1600/Back+To+Top.png' style='margin-right:-9px'/></div>
Kode merah ganti dengan URL gambar kamu.
Sekian Trima Kasih :v 
referensi dari http://greenz-blogger.blogspot.com/

6 komentar untuk "Cara Membuat Back To Top dengan Effect Bounce | Blog Krizeer"

  1. keren .. ini dia yang ku cari efek bounce
    komen balik sukses dari kxmadagascar.blogspot.com

    BalasHapus
    Balasan
    1. tambahan gan :v
      itu kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/> jika sudah di pasang, ndk usah di pasang lagi :3

      http://ah-shared.blogspot.com

      Hapus
    2. Yah itu kan buat yang belum ada script jquerty, klo buat yg udah ada gk usah dipasang lagi :D

      Hapus
    3. sob, kok tobol back to top cuma di beranda saja??? 7:(

      Hapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top