Hiii friend 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);
}
});
});
};
$(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 -->
4 . Cari kode <body> ganti dengan kode <body id='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>
7. Selesai Dan simpan template.,.,<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>
- 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.
Artikel paling laris
laris pye makasute??
bagus nih :)
neis info
turswun infone
sip.,., good info
Dengan jquery ini pengunjung dengan mudah meluncur ke header hanya dengan satu klik
Salam ukhuwah
Keren sob
ambil dr magazineforum yah
salah satu yang mantap :)
Balasan komen @ ariel
Oke riel,.,.
nice tips mas...
keren..
Mantep Mas . . .
Thanks sob tutorialna
NIce Kemin Nice...
siiiippp ji.....
@ all,, silahkan di coba juga lho tutorialnya...
@ ArDa
Yo Yo da.,., ngono wae mureng2 ra karuan.,.,
sing penting wis ko bales.,,
Info yang inovatif abis bro...boleh dicoba nih..
yaa silahkan mas.,.,
Mantafft Kang... kebetulan Blog aq blom ada Back to TOP,, mw aq coba ah...
Tur suwun ji'...
Sami2 kang...
nice post bang.....
salam knl ya.....
jika berkenan silahkan mampir balik.....
@ Botzz>> Silahkan sobat....
Coba ikutan otak-atik HTML. semoga aja tidak kacau.
gagal :p