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 » Rancangan / 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:
4.. Cari kode <body> ganti dengan kode <body id='top'>
<!-- 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);
}
});
});
};
$(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>
Simpan dan Berhasil ::::
{ 0 komentar... read them below or add one }
Posting Komentar