Lagi-lagi tombol “Back To Top” ni. Hehe J
Pada postingan sebelumnya saya sudah menulis tip membuat tombol “Back To Top” tanpa embel-embel efek. Nah pada kesempatan ini saya ingin berbagi tips, membuat tombol “Back To Top” dengan efek bounce pada blog anda.
Apa itu efek bounce?
Baiklah, langsung saja kita KTP ya...
- Pertama, Masuk ke blog anda
- Kemudian masuk ke Templete
- Pilih edit HTML(centang Expand Templete Widget)
- Temukan (Ctrl + F) script ]]></b:skin>
- Copy kode di bawah ini kemudian letakan di atas script ]]></b:skin>
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}<br />
Kemudian cari (Ctrl + F) </head> kemudian letakan script di bawah ini dengan kode berikut :
<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() > 100) { $(#toTop).fadeIn(); } else { $(#toTop).fadeOut(); } });
$(#toTop > img).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>- Kemudian simpan template sobat
- Selanjutnya pilih Layout/Tata letak
- Tambah gadget (HTML/Javascript)
- Tambahkan kode berikut
<div id=toTop>
<!-- Back to top animation written by farizemo | edited by ilham mboh --><img src= http://i1339.photobucket.com/albums/o719/nym_artopraph/navigate-up-ictgroncopy_zps383e362f.png style=margin-right:-9px/></div>Untuk mengganti tombol/button, bisa dilakukan dengan mengganti sumber gambar (tombol/button) berikut dengan URL gambar anda:
http://i1339.photobucket.com/albums/o719/nym_artopraph/navigate-up-ictgroncopy_zps383e362f.png
Demikialah tips cara membuat tombol/button “Back To Top” dengan efek bounce pada blog anda. Semoga tips ini bisa bermanfaat buat kawan-kawan.
Post a Comment