Cara Membuat tombol back to top keren

Cara Membuat tombol back to top keren

Hello teman-teman,disini saya akan sharing sedikit tentang cara membuat tombol back to top keren di blog,tombol back to top ini sangat lah bermanfaat dan mempermudah pembaca atau pengunjung blog sobat,karena dengan adanya tombol  back top top ini pembaca atau pengunjung blog sobat tidak susah lagi untuk kembali ke menu yang paling atas dari blog sobat.contohnya saja sobat punya artikel materi yang sangat panjang sampek ke bawah,jadi dengan adanya tombol ini pasti si pengunjung tidak susah lagi untuk menggerakkan mouse nya,jadi kalau ada tombol ini pasti tinggal sekali klik aja.pasti pengunjung blog anda sangat senang dan gak bakalan bosan mengunjungi blog sobat,
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>

• 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>

• 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.

http://4.bp.blogspot.com/-0IvW8ZZUWPA/Ub6lEcb_tuI/AAAAAAAAASY/hT6LaQa6mSo/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

http://2.bp.blogspot.com/-66Cm26xnxUo/UKDgPdSdHII/AAAAAAAAF1A/3yk89hkEugE/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