Cara Membuat Back To Top Dengan Efek Bounce Keren


Pertama Sobat Login Dulu Blognya.
Terus Masuk ke menu Template, Centang Expand Template Widget, Cari Kode </head>
Kemudian Copy dan paste kdoe berikut 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;#HermanbagusTop&#39;).fadeIn(); } else { $(&#39;#HermanbagusTop&#39;).fadeOut(); } });
$(&#39;#HermanbagusTop &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>

Kemudian Simpan.

Langkah Kedua, Masuk ke Menu Tata letak, Tambahkan Gadget, Html / Javascript.
Copy dan paste kode berikut pada menu Html/ Java script.

<style>
#HermanbagusTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='HermanbagusTop'><img src='http://4.bp.blogspot.com/-N1yMiMKul_s/UN_riEUlSUI/AAAAAAAAHN0/1wBpCdmxQmA/s150/back+to+top+hermanbagus.png' style='margin-right:-9px'/></div>

Kemudian Simpan dan Lihat Hasilnya, selamat mencoba dan berkreasi :)

Subscribe to receive free email updates:

70 Responses to "Cara Membuat Back To Top Dengan Efek Bounce Keren"

  1. makasih gan infonya. dengan script itu ane jadi bisa belajar tentang scrolling, fade in ama fadeout. selamat tahun baru 2013 gan, semoga sukses di tahun yang baru ini. Happy blogging and keep posting :)

    ReplyDelete
    Replies
    1. Amin, sama sama dan terimakasih sobat.

      Delete
  2. wuih keren,,,da gaya 69 juga disini,,,

    ReplyDelete
  3. wih mantap nii sob.. apalagi sambil gesek atas bawah.. :176

    ReplyDelete
  4. Sebetulnya untuk blog AdityaReinaldo apakah back to top ini bisa membuat berat blog AdityaReinaldo?

    ReplyDelete
  5. tampian nya serasa baru lagi nih, keren... :D
    maf ya baru mampir lagi, kemarin sibuk :)
    tugas beres :)

    ReplyDelete
  6. follow sukses..followbeckkk ya gan ^_^

    ReplyDelete
  7. scribnya keren sob ada tulisan HermanBagusTop, cara promosi level tinggi tuh

    ReplyDelete
  8. tambah lagi ilmu ane, makasih ga. Ditunggu kunjungan baliknya :D

    ReplyDelete
  9. Izin share, tapi back to top button di post saya,gambarnya boleh dibedain ya.

    ReplyDelete
  10. mantab sob,,tugas mantab jg sob

    ReplyDelete
  11. Ini seperti yg diterapin di blog ente ya sob?

    keren2

    ReplyDelete
  12. ehh tanya nh..
    1. pada #HermanbagusTop {text-align:center;... untuk apa text-align:center itu pada tombol back to top ?

    ReplyDelete
    Replies
    1. sebenarnya tidak untuk apa apa sih sob, lupa belum ke hapus :P

      Delete
  13. mantap nih,, efek nya makin menarik jadinya

    ReplyDelete
  14. wah keren sobat, ijin simpan dulu dech....?

    ReplyDelete
  15. Happy new year Bro,,BTW ijin nyonontek yah ( niru ) boleh doonk hehehe,,,Terimakasih Bro,,

    ReplyDelete
  16. hahaha, naiknya isi mantul, hahaha, mantep bro :101

    ReplyDelete
  17. abbsen sebelum tidur sob :107 :104

    ReplyDelete
    Replies
    1. waduh tumben jam segitu uda tidur sob?

      Delete
  18. Saya udah menggunakannya. hehhee.. :)

    Tugas beres disini sob.. :105

    ReplyDelete
  19. keren banget blognya gan.. mau follow achh.. follow back ane ya gan ?

    ReplyDelete
  20. makasih sobat ,info yang sangat menarik neh ..boleh dicoba kan ? jangan lupa mampir ya ..

    ReplyDelete
  21. pertamak gan
    kujungan bang lama tak kesini

    ReplyDelete
  22. oh, begituan harus pake js ya gan?

    ReplyDelete
    Replies
    1. huuh sob, yang biasa juga ada kok :)

      Delete
  23. whhh oke juga nih bang...

    oya udah oke nih keyframenya....

    ReplyDelete
  24. keren kaya punya abang yang di pojok ini bang, yang pake senyum, mau dong,hehe

    ReplyDelete
  25. wah makin sangar saja nih sob :105

    keren :)

    btw tuluangagungnya mana nih?

    ReplyDelete
    Replies
    1. hehe iya sob :) makasih sob . PM aja deh sob :)

      Delete
  26. Manteb sob, jadi lebih bervariasi nih.

    ReplyDelete
  27. artikel yang sangat bermanfaat sob

    thanks atas infonya soob :D

    ditunggu kunjungan baliknya yaa :D

    ReplyDelete