Membuat Back To Top Dengan Jquery

HHiii 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 » 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:

   <!-- 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() &gt;= settings.min)
   {
    el.fadeIn(settings.fadeSpeed);
   }
   else
   {
    el.fadeOut(settings.fadeSpeed);
   }
  });
 });
};

$(document).ready(function() {
 $(&#39;#top-link&#39;).topLink({
  min: 300,
  fadeSpeed: 500
 });
 $(&#39;#top-link&#39;).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>


<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 ::::

DEMIKIAN POSTINGAN BLOG TUTORIAL PERTAMA SAYA HEHEHEHE

JIKA ADA KERUSAKAN ATAU KETIDAK KEBERHASILAN MOHON TANYA ATAU KOMEN



Sumber dari kakak saya 
Bagikan :
+
Previous
Next Post »
13 Komentar untuk "Membuat Back To Top Dengan Jquery"

triknya menarik nih, langsung coba kang :D

Salam kenal ^_^

ya mas,,,.,salam kenal jg ya,,.,.,.,

Mantab. Sya sudah coba praktikkan klik "Back To Top" pada blog ini. Langsung meluncur ke atas.

Salam ukhuwah

bisa di coba di blog anda lho mas.,.,.,.

salam ukhuwah juga.,.,.,.,

bagus nih buat ngelengkapin buku q, q lagi mau buat tentang kumpulan tips blog dari 100.000, blogger indonesia...

oh iya mas.,.aku cantumin jg ya,.,.,hehehehe

nice post sob.. good luck..

Aku mau pasang, tapi ngga jadi . .hehehe..jarang yg ngklik sih . .

saya sih lebih seneng back to top biasa

wah,, bagu2 o... tapi aku sama dengan komen diatasku.. seneng yang biasa aja..

Ayoo Jangan Hanya Baca Aja, Jika Anda Adalah Komentator Terbaik, Anda akan mendapatkan Backlink Gratis!!
~~~~~~NO SPAM PILISSS~~~~~~

 
Template ReDesigned By ojioo Blog
Back To Top