Back to Top merupakan sarana penting dalam suatu blog. Dengan back to top, memudahkan para pengunjung untuk memindahkan kursor ke bagian paling atas blog. Misalnya, pengunjung A menghampiri/mengunjungi blog ini dan membaca sebuah artikel di blog ini sampai paling bawah.Karena pengunjung A ini males atau aras-arasen (kalo orang jawa bilang) untuk menggeser kursor sampai ke atas lagi, pengunjung A ini bisa mengeklik sebuah tombol atau link yang memudahkan Si pengunjung ini untuk kembali ke bagian paling atas blog. Nah, tombol inilah yang dinamakan tombol “Back to Top”.
Belum jelas juga apa yang dimaksud “Back to Top?” Sekarang caba geser/scroll cursor sampai ke bagian footer. Disana kalian menemuai sebuah kata Back to Top, nah coba kalian klik. Apa yang terjadi? kursor bergerak ke atas kan? nah, itulah yg namanya “Back to Top”. Kalau masih belum mudeng juga, waliken klambimu!.
Bentuk-bentuk, kreasi, model, syle back to top ini beragam jenisnya. Mulai yang standar, sampai yang menggunakan jQuery. Back to top yang standar mah udah biasa. Tapi yang jQuery kelihatannya asek nih. Back to Top yang menggunakan jQuery terlihat mempesona dan kelihatan elegan dan dinamis, tidak klasik ataupun standar. Adapun perbedaan Back to Top standar dan Backto Top yang menggunakan jQuery mode : on.
Pertama Back to Top yang standar, gerak keatasnya sangat cepat bahkan tidak terlihat gerkanya, ujug2 langsung neng nduwur. Tp kalau Back to Top yang menggunakan jQuery, itu geraknya indah. Artinya, berbeda dengan Back to Top standar, geraknya itu pelan-pelan dan kalu dilihat itu indah. Nah tentunya kalian ingin memasang Back to Top menggunakan jQuery ini?
Meskipun kali ini saya akan memberikan tutorial untuk pengguna Blogger, pengguna WPjuga bisa menggunakan tutorial ini dan tidak usah khawatir karena kalian juga bisa mengkopi scriptnya dan meletakanya di blog kalian. Langsung aja ke TKP!
- Silahkan login ke blogger
- Kemudian tujulah bagian Racangan
- Dan pilih yang Edit HTML
- masukan kode di jquery ini, di atas kode </head>
- Kemudian Ganti kode <body> dengan kode <body id=’top’>
- letakan kode di bawah ini, di atas kode </body>
- Selesai,
- simpan template .dan lihat hasil nya. semoga berhasil ya!
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/> <!– jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini –> <script type=’text/javascript’> $(function(){ $('a[href*=#top]').click(function() { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 1000); return false; } } }); }); </script>
<div id=’gotop’> <a href=’#top’ title=’Go to Top’> <img src=’http://2.bp.blogspot.com/_fqjCZ2SxflI/TBliTFM2GOI/AAAAAAAAAKI/xgAIzEcW4MM/S768/top.gif’ style=’right:20px;bottom:20px;position:fixed’/> </a> </div>
wah sudah saya terapkan gan, makasih tutorialnya
ReplyDeleteditunggu kunbal baliknya ya gan