Membuat Back To Top ( kembali keatas) Dengan Smoothscroll jQuery

Viyan Pradita Jumat, September 03, 2010

Apa itu Back To Top, Aksesori tambahan pada blog ini merupakan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini. yang tentu fungsinya untuk memudahkan kita, dan khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan/icon "Back To Top". Biar lebih jelas lihat gambar dibawah ini.

Demo


Ikuti langkah-langkah berikut ini :

1. Seperti biasa, Login ke blogger sobat
2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) : </head>
5. Lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

6. Simpanlah kode javascript di bawah ini, persis di bawah script jQuery di atas

<!-- Back To Top -->
<script src='https://sites.google.com/site/kodeblogger/javascript/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 -->

7. Terus cari lagi kode: <body> dan gantilah kode tersebut dengan kode dibawah ini:

<body id='top'>

8. Belum selesai Sob... Lanjutkan dengan mencari kode: ]]></b:skin>
dan masukkan kode CSS di bawah ini di atas 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;}

9. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

10. Simpan template, dan lihatlah perubahannya.



Keterangan :
1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (agar tidak double tentunya).
2. Kode yang saya beri warna biru, itu adalah posisi tulisan dan untuk merubah warna pada button back to top-nya.

Selamat mencobanya, Semoga berhasil memasangnya.. salam blogger !!

Ditulis Oleh :

Artikel Membuat Back To Top ( kembali keatas) Dengan Smoothscroll jQuery ini dipublish pada hari: Jumat, September 03, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

3 komentar
Terjun Ke Kolom Komentar

  1. Bro maju truz blog'a !! Newbie kyk w terbantu nih............

    BalasHapus
  2. FILE JSNYA CACAT TU BANG,,,.

    BalasHapus
  3. @Anonim: Sepp, Terimakasih buat koreksinya :)
    Saya kira file.js-nya, sampai saya update lagi, ternyata bukan. :))
    Maaf baru saya edit lagi soalnya, ada kode yang hilang untuk langkah No9, yaitu untuk kode diatas tag < / body
    Silahkan dicoba kembali, udah saya terapkan dan sukses.

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers