Jumat, 15 Juni 2012
Tutorial ini saya dapat dari blog teman hehee. Saya suka yang back top seperti ini. Apalagi back top nya yang bergambar hehee. Ini back top nya mempunyai efek bounce. Penasaran ?
1. Login ke blogger, kemudian pilih Template, lalu Edit HTML
2. Jangan lupa centang Expand Template Widget
3. Lalu cari kode ]]></b:skin> dengan CTRL +F supaya mudah
4. Kemudian copy paste kan kode dibawah ini tepat diatas kode ]]></b:skin>
#toTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none; color:#000; font-family:verdana; font-size:11px;}5. Kemudian cari kode </head>
6. Copy kan kode dibawah ini tepat dibawah 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() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } });7. Kemudian simpan template
$('#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>
8. Heitss masih ada lagi nih, lalu klik Tata Letak di dasbor
9. kemudian pilih Tambah Gadget dan pilih HTML/.Javascript
10.Lalu copy kan kode dibawah ini :
<div id='toTop'><!-- Back to top animation written by farizemo | edited by ilham mboh --><img src='http://picturestack.com/408/690/3RMToTopyonbijEz.png' style='margin-right:-9px'/></div>Kemudian di simpan.
Tulisan warna hijau bisa diganti dengan URL gambar yang kamu inginkan.
Related Posts :
- Back to Home »
- TUTORIAL BLOGSPOT »
- Cara Membuat Back To Top Dengan Efek Bounce
{ 7 Komentar... read them below or Comment }
Jika ingin copy paste artikel ini, jangan lupa sertakan sumbernya ya, hargai usaha admin ^^, Kalau mau komentar jangan yang bersifat menghina maupun mengejek. Tidak sopan tau hahaa. Terima kasih sudah berkunjung ke blog ku. Jangan lupa di follow dan pasang banner ku ya \^^,/
udah aku coba,tapi cara masang agar melayarang gimana?
BalasHapuskuliat d blog mu kk udah berhasil kok back to top nya ,
Hapusaku dah,coba sekali lagi behasil kakak.thanks atas tutorialnya,aku numpang share ya!
BalasHapushahahaha..iya juga ya makasih ya untuk tutorialnya
BalasHapusoke kk,
HapusKakak,banner kaka yang 480 x 60 aku nggak taruh di header ya!
BalasHapustapi aku taruh disini
Jadi maaf ya kak!
yoda kk gpp kok,
Hapus