1:58:00 PM

Membuat Tombol Back To Top Menggunakan JavaScript

Tombol Back To Top Menggunakan JavaScript, mengapa harus menggunakan JavaScript ? Mungkin pertanyaan simple ini pernah terlintas dibenak Anda setelah Anda membaca judul pada postingan kali ini. Nah, kegunaan JavaScript ini adalah agar tampilannya menjadi lebih lembut dan enak untuk dilihat. Banyak kegunaan dari tombol ini, selain tidak perlu menggunakan scroll, Tombol Back To Top Menggunakan JavaScript ini juga menyingkat waktu kita.

Nah, buat sobat yang pengen coba menggunakan script Tombol Back To Top Menggunakan JavaScript ini bisa ikuti langkah berikut ini. untu contoh, sobat bisa lihat pada blog Ketawa Ngakak.

Membuat Tombol Back To Top Menggunakan JavaScript

Pertama, sobat harus login ke account blogger sobat,
Kedua, kemudian ikuti langkah ini, Rancangan, Edit HTML, Expand Template Widget, seperti terlihat pada gambar dibawah ini.


Ketiga, letakkan kode dibawah ini tepat diatas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/BackToTop.js' type='text/javascript'/>
<!-- Back to top by www.wakrizki.net -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl25lmypriNwzYp5K_zD-DLo8BSc1fCBncj8Al1LC2aN40r5K0FQKBqIaWtl6KEBCFwoSXirkTsjZSJDZqsf_t3yR0MqD07iWTsUi4bqLj4U6AYE9ttH_vKEHKU9IlFqu_8E-nLGWv39Dk/s1600/navigate-up-icon.png'/></a>

Sehingga hasilnya akan seperti ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/BackToTop.js' type='text/javascript'/>
<!-- Back to top by www.wakrizki.net -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl25lmypriNwzYp5K_zD-DLo8BSc1fCBncj8Al1LC2aN40r5K0FQKBqIaWtl6KEBCFwoSXirkTsjZSJDZqsf_t3yR0MqD07iWTsUi4bqLj4U6AYE9ttH_vKEHKU9IlFqu_8E-nLGWv39Dk/s1600/navigate-up-icon.png'/></a>
</body>
</html>

Keempat, kode yang berwarna merah adalah kode image, silahkan sobat ganti dan kemudian simpan template sobat.

Selain disisipkan pada Edit HTML, script ini juga bisa sobat simpat pada Widget. Selamat mencoba, semoga berhasil.

5Komentar :

  1. wah keren mas,, maren udh nyoba,, tapi gk jadi
    izin makek dari mas

    ReplyDelete
  2. Sip mas,,,makasih banyak,,,,

    ini yang simpel,,,tutorial yang lain kebanyakan gambar udah masuk scipt jadi rada repot ngeditnya,,,tapi yang ini simpel ganti gambarnya,,,

    kalo script yang udah nyampe atas tapi tombolnya ke hidden ada gak ???

    kirim ke masuhuy@gmail.com y,,,,sekalian tutorialnya,,hehe

    makasih

    ReplyDelete

.::. Isi Yang Baik Yea .::.

1. Baca artikelnya, lalu beri komentar yang sesuai dengan tema.
2. Bila sobat mau memasukkan link pada saat berkomentar mohon jangan mempergunakan link live,

Contoh :
- visit to my blog http://www.wakrizki.net/ (boleh, karena bukan link live)
- visit to my blog http://www.wakrizki.net/ (dilarang, karena link live)

Komentar yang mengandung link live akan saya hapus.
Terima Kasih.