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>
<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>
- Kemudian Ganti kode <body> dengan kode <body id=’top’>
- letakan kode di bawah ini, di atas kode </body>
<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>
- Selesai,
- simpan template .dan lihat hasil nya.
semoga berhasil ya!
wah sudah saya terapkan gan, makasih tutorialnya
ReplyDeleteditunggu kunbal baliknya ya gan