Cara Membuat Tombol Back To Top Di Blogspot

TRIKKACANG - Hai sobat kali ini saya akan membagikan trik atau cara untuk membuat tombol Back To Top yang kayak punya admin yang di bawah sebelah kanan blog ini. Apa sih sebenarnya tombol Back To Top itu, tombol ini adalah tombol yang berfungsi untuk kembali ke halaman atas atau otomatis scroll ke atas halaman sebuah blog dengan sekali pencet atau klik. Tombol ini sanggat berguna bagi pembaca atau visitor blog kalian, karna tombol ini akan sangat mempermudah bagi para pembaca. Terus bagaimana cara membuatnya yang kayak di blog ini, gampang ikutin langkah langkah di bawah ya !

Sebelumya kita sedikit pahami tentang fitur ini, fitur back to top yang akan kita bahas dan buat sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek JQuery ini lebih smooth atau lembut dibandingkan menggunakan script animasi lainya seperti bila menggunakan full javascript biasa. Kelebihanya juga efek ini sangat ringan dan tidak membuat blog anda lemot, dan tentunya sangat cocok bila di pasang di blog anda. Oke langsung saja kita coba praktikkan

Memasang Tombol Back Top Top dengan jQuery di Blog

• Login terlebih dahulu ke akun blogger anda
• Pilih Tempalate > Edit HTML 
• Sebelum anda Edit , anda backup terlebih dahulu seluruh kode script template anda
• Cari kode script </body> ( gunakan tombol CTRL+F )
• Copy kode dibawah ini dan paste tepat di atas kode script </body> ( namun bila kode sudah ada di template anda , kode tersebut tidak usah di copykan lagi )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

• Bila cara di atas sudah sekarang ke stap berikutnya. Copykan kode dibawah ini kemudian pastekan di bawah kode yang pertama tadi

<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/><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/AVvXsEiZx1l2WZ9zUEi9ybkV32p0vAe_3Ul5BCDLC357_r1RY-REdfw6igOZbQwYAuMu1br3igRxQl976VYI_iVibY00AQTcSAjQll5Q2WPW_-8F82VRFCTG9JEgH7LiMjfIA72y7ZO3pMglbck/s1600/back-to-top.gif'/> </a> 

• Terakhir simpan template yang sudah di edit tadi kemudian cek hasilnya

Bagaimana apakah tombol Back To Top sudah bisa di gunakan. untuk mengetesnya , coba lihat pada bagian bawah pojok kanan, bila terdapat tombol atau tanda panah berwarna hitam atau yang lainya coba anda klik, saat mengeklik scrool ke bawah terlebih dahulu agar telihat efeknya, bila berhasil saat anda klik tombol tersebut dengan otomatis web browser anda akan scrol ke atas.

NB: jangan lupa bakcup terlebih dahulu dan jangan langsung pastekan code diatas, paste code di notepad terlebih dahulu kemudian copy code yang ada di notepad dan pastekan di edit HTML blog anda.