NO IMAGE AVAILABLE

Feb 11, 2012

Cara Membuat Tombol Back To Top

0 komentar
Setelah kemarin saya gak terlalu update karena sibuk dengan UAS saya, baru kali ini saya bisa kembali meng-update lagi artikel Idris Dehidrasi.

Kali ini saya akan membahas tentang bagaimana sih caranya membuat button atau tombol back to top kayak di blog saya ini?
Apa sih maksutnya dengan tombol back to top ini? Tombol back to top ini berfungsi sebagai suatu button yang nantinya akan mempermudah para visitor blog kita jika seandainya visitor kita sedang berada di bagian bawah artikel, biasanya jika mereka sedang membaca di bagian bawah artikel kita dan ingin kembali ke bagian atas normalnya yaitu mereka harus menggeser scroll ke atas. Namun jika kita memasang tombol back to top tentunya akan lebih mempermudah para pengunjung kita untuk merangkah naik ke bagian atas blog kita hanya cukup meng-klik tombol back to top.

Nah, kali ini saya akan mengajarkannya kepada kawan-kawan  dehidrasi semuanya nih, namun mohon kuti langkah-demi langkahnya ya agar  gak ada kesalahan.

1. Silahkan masuk ke halaman blog kalian
2. Pilih Rancangan
3. Klik Edit HTML
4. Pastikan kawan-kawan memberikan tanda centang pada Expand Template Widget
5. Silahkan cari kode berikut :</body>
6. Jika ada, Silahkan copy-paste saja script di bawah ini tepat sebelum kode di atas :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

7. Letakkan script di bawah ini setelah kode pada langkah ke 6.

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Script Tombol Back To Top-nya ada di bawah ini -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://4.bp.blogspot.com/__54X_7pUWPw/S-ldyr2WFgI/AAAAAAAAAaQ/nnVfB-FBWR4/s400/uparrow_orange.png' width='70px'/></a>

8. Simpan

*) Catatan :
Silahkan ganti width='70px' dengan angka ukuran gambar kesukaan anda.

Semoga bermanfaat buat kita semua ya....

Post a Comment


Mohon tinggalkan komentar anda di sini!
Mohon jangan lakukan spamming!
Terima kasih atas kerja samanya!