Blogger, jQuery, Tips dan Trik, Cara Buat Tombol Back To Top di Blogspot
Cara membuat/memasang tombol back to top/go top di blogger, tombol
back to top adalah sebuah tombol yang berfungsi untuk
membuat/mempercepat scrolling dari bawah keatas di sebuah web page
ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk
kembali´pada bagian atas dari blog/website dengan cepat ketika berada
dibagian bawah halaman dengan hanya sekali klik pada tombol back to top
tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari
blog saya ini
Fitur
back to top
yang kita buat/bahas sekarang ini adalah fitur tombol back to top
menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth
daripada efek javascript lainnya seperti pada animasi
bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek
back to top
ini sangat ringan ketika di loading dan sangat cocok digunakan didalam
blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang
unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti
tips & tricks blogger berikut.
Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger
- Silahkan login di Blogger
- Pilih Template > Edit HTML > klik Expand Widget Template
- Cari kode </body> (gunakan CTRL+F)
- Copy kode dibawah ini dan Paste tepat diatas kode </body>
(jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah
dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<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/AVvXsEgfBYTtftXBdIegmAAUSUq43so53YsEmKq8sgFlYVXRq4Qru-A1epCWzfjpOQpTrfqlhfQpQQFoHPb0v-IISp9uSaUOk9QzllyoXhShxh3a9jP0rHEqDzbdoDCLqJN68SS3X7xzzL_jarE/s1600/back-to-top.gif'/></a>
- Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
0 comments:
Post a Comment