Untuk Pertama kali ini kita akan membahas Blog tutorial tentang membuat back to top dengan jquery merupakan sarana penting dalam suatu blog. Dengan back to top, memudahkan para pengunjung untuk memindahkan kursor ke bagian paling atas blog pada saat pengunjung berada pada dasar halaman. Misalnya,anda menghampiri/mengunjungi blog ini dan membaca sebuah artikel di blog ini sampai paling bawah. Karena anda ini males atau aras-arasen untuk menggeser scroll sampai ke atas lagi, anda ini bisa mengeklik sebuah tombol atau link yang memudahkan anda ini untuk kembali ke bagian paling atas blog(inggrisnya back to top). 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 bawah sedikit. Disana kalian menemuai sebuah kata “Back to Top“, nah coba kalian klik tombol back to top ini. 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 serta lebih cool, tidak klasik ataupun standar. Adapun perbedaan Back to Top standar dan Back to 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 dan sekalilagi.,., cool.,.,. 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 cara nya memberi back to top dengan jquery!
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan script jquery berikut diatas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>3. Masukan juga kode javascript berikut dibawah script jQuery tadi:
<!-- Back To Top --><script src='http://riky-rizkiyana.googlecode.com/files/back-to-top.js' type='text/javascript'/><script type='text/javascript'>jQuery.fn.topLink = function(settings) { settings = jQuery.extend({ min: 1, fadeSpeed: 200 }, settings); return this.each(function() { var el = $(this); el.hide(); $(window).scroll(function() { if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); });};4 . Cari kode <body> ganti dengan kode <body id='top'>
$(document).ready(function() { $('#top-link').topLink({ min: 300, fadeSpeed: 500 }); $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); });});</script><!-- End Back To Top -->
5. Masukan CSS dibawah sebelum kode ]]></b:skin>
#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}6. Masukkan kode HTML berikut sebelum </body>
<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
7. Selesai Dan simpan template.,.,
Catatan :
- Script jquery jika sudah memiliki tidak perlu dipasang lagi (biar tidak double)
- 'id=top' atau '#top-link' anda dapat rubah, itu merupakan kunci perintah dari effect.
- Anda dapat merubah warna, kata "Back To Top" dan posisinya sesuai selera anda.
Demikian kode-kode berdasarkan dari sumber yang ada.
