Cara Membuat Tombol Back To Top di Blogspot

Cara membuat atau memasang tombol back to top atau go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat atau 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 atau website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh anda bisa melihat pada bagian kanan bawah dari blog saya ini.

Fitur back to top yang kita buat atau 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 memodifikasi blognya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuatnya silahkan ikuti tips dan tricks blogger di bawah ini.

*********************************************************************************
Cara Membuat Tombol Back To Top Dengan jQuery di Blogger
*********************************************************************************

1. Silahkan login di Bloger
2. Pilih Template >Edit HTML >klikExpand Widget Template
3. Cari syntak </body> (Gunakan CTRL+F)
4. Copy syntak di bawah ini dan Paste tepat di atas syntak </body> (Jika syntak di bawah sudah ada di tamplate anda, syntak di bawah tidak usah di pakai lagi)
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    5. Kemudian copy lagi syntak yang da dibawah ini dan kemudian paste tepat dibawah kode diatas.  
    <script src='http://bloggerpeer.googlecode.com/files/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/AVvXsEjnaPZCzJOINLLenwbGHBRpVWu2XMgxCKFjTCDVL7k_xD6mE0uRGolwSq33KqS9I69dUsAJOgQ8d_iEAdFwaK1Vu4K0vFN5CwkkeqRjPPjpJJ1PNh0AH49dvypYyV5ufFvhHYID-S4D1hE/s1600/back-to-top.gif'/></a>
    6. Terakhir, simpan syntak template dan jika sudah tombol back to top sudah bisa di pakai.
    Selamat Mencoba..

    Posting Komentar