Membuat Tombol Back to Top Dengan Jquery


Media Infonetku - Sebelum saya membuat artikel ini, sebelumnya saya juga sudah pernah membuat artikel tentang tombol back to top yang berguna untuk membantu para pembaca blog sahabat media infonetku untuk scroll blog sahabat untuk kembali ke header blog dengan mudah.

Nah apa bedanya yang sekarang ini dengan yang sebelumnya ? kalau yang sebelumnya yang saya berikan itu tombol back to top tanpa menggunakan efek scroll. Kalau yang pertama itu hanya scroll biasa yang jika kita klik pada tombol itu langsung scroll ke header dengan cepat, sedangkan dengan plugin jquery yang sekarang ini menggunakan efek yang memperlambat scroll sehingga lebih cantik dan bagus selain itu juga tombol back to top yang baru ini juga tidak akan muncul kalau kita masih ada di bagian atas blog untuk demonya silahkan dicoba diblog ini, coba scroll kebawah dan keatas dan lihat tombol back to top dibagian kanan bawah.

Cara pemasangannya juga lebih mudah dan gampang karena kita menggunakan plugin jquery.
Untuk design tombol saya masih menggunakan design yang pertama saya berikan seperti gambar diatas dan semoga sahabat suka yah.

Cara pemasangan,


  • Masuk dulu ke dasbor blog kemudian klik template lalu edit html
  • Kemudian cari kode dibawah ini gunakan Ctrl + V supaya lebih cepat
</head>

  • Kemudian copy paste kode dibawah ini sesuai dengan design tombol selera sahabat lalu save template

Kode untuk tombol warna biru.

<script src='https://doet-mediainfonetku.googlecode.com/files/backtopcontrolbiru.js' type='text/javascript'/>

Kode untuk tombol warna orange.

<script src='https://doet-mediainfonetku.googlecode.com/files/backtopcontrolorange.js' type='text/javascript'/>

Kode untuk tombol warna hijau

<script src='https://doet-mediainfonetku.googlecode.com/files/backtopcontrolhijau.js' type='text/javascript'/>

Kode untuk tombol warna coklat

<script src='https://doet-mediainfonetku.googlecode.com/files/backtopcontrol.js' type='text/javascript'/>


Selamat mencoba yah, semoga bermanfaat
Share artikel ke: Facebook Google+ Twitter Digg

0 komentar:

Posting Komentar