Selasa, 09 April 2013

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 dan berguna buat sahabat Media infonetku.


10 komentar

gan,cara buat dropdown menu kaya blog ini gimana ? share yah gan :)

Ditunggu yah gan, dalam waktu dekat saya akan buat tutorialnya

bener2 top gan artikel nya

wah mantep dan menarik infonya.. plus keren blognya :)

salam kenal Andika

gan minta script buat tombol yang warna abu abu dong ditunggu ya dan kunbal nya

gan, ada gak tombol back to top yg agak rampingan lg, di tunggu balasanya,,, :D

Terimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..

http://landongobatherbal.com/obat-herbal-kanker-serviks/


EmoticonEmoticon