Cara Membuat tombol back to top keren
oke langsung aja ini dia caranya sobat:
- silahkan sobat masuk ke blog sobat.
- kemudian klik TEMPLATE,
- kemudian klik EDIT HTML
- kemudian tekan CTRL + F Untuk mencari kode </head>,setelah ketemu
- copy code di bawah ini di Atas </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>
<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>
- kemudian tekan simpan template
- setelah itu klik tata letak,
- kemudian klik tambah gadget HTML/JAVASCRIPT
- kemudian copy code di bawah ini dan paste kan kedalam nya.
<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='LINK GAMBAR YANG AKAN SOBAT BUAT'/></div>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back To Top' src='LINK GAMBAR YANG AKAN SOBAT BUAT'/></div>
- kemudian ganti lah tulisan yang berwarna biru dengan link gambar yang akan sobat buat,
- setelah itu simpan.
- saya punya contoh gambar yang keren buat sobat,kalau sobat pengen,ambil aja link gambar yang di bawah ini sobat:
- setelah di copy link gambar di bawah ini,ganti teks yang berwarna biru dengan link gambar yang sobat ingin kan.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDi5AnPJBTvGK3aR24xka06Pkk5Q8WWggmHlXyjg8MEESjqbUFkeD4-rPspXyC8uzgH6QQx_3iz1LpBopVZTlMKtKU6CEJenp42UGrdoK_blrBwA1xFIptqm9veTsYlrDN1I4g55cMJgH/s200/back-to-top-button.gif
http://static.tumblr.com/npruonj/Lf6m2tyur/back_to_top_button_pink.png
http://i1109.photobucket.com/albums/h426/fenafenn/bth_back_to_top_button_blue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSLhjr1TTiChG4E-vsFu1BzjdvFInPsziT72g6N_6BA51cZlB6I_yRHzxhxvtJuS9brTe0SwsIhD-s9M1f0vONu6W_HoyjT5TWwnmBvjTEz7amnpoJV8MbZCXc2MmBqdBy97tccs9GeU/s1600/back+to+top+button.jpg
http://www.blibli.com/wcsstore/Indraprastha/images/colors/color1/new-loading.gif.pagespeed.ce.jPPftIEsbw.gif
semoga dengan ilmu yang saya berikan ini bermanfaat bagi teman-teman semua,dan terima kasih sudah ngunjungi blog saya,tinggal kan coment kalau sobat pengen nanya sesuatu atau ngasih saran. gabung di sahabat bacpaker saya ya sobat,Terima Kasih
