Cara membuat tombol Back to top di Blog

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 kiri 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 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 & trick blogger berikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

">Silahkan login di Blogger

">Pilih Design > 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 di bawah kode di atas.

<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/AVvXsEjCBUD8UnMpZQXtZKaeBsdbefRbPrpJnttTXzSA_NWKrCcP7qbxcMp8mdo4U45GPuy_0G0dksfaFckRKhAB-UkBe4MUjHUDhjSn30cCIY4iDDyVat2Jxs1C9tH7tSuAUMh1W81kMs2JvTE/s1600/back+to+top+anime4six+yakushi+kabuto+sage.png'/></a>

Kode berwarna biru bisa sobat ganti  dengan URL gambar pilihan Sobat 

Kode berwarna hijau bisa sobat ganti letak widget ( kanan / kiri)

">Save Template

Cara Membuat/Memasang Tombol Back To Top Dengan HTML/Javascript

Silahkan Ikuti Langkah-langkah berikut :

">Pertama login akun Blog Anda

">Pilih menu Rancangan dan Pilih Elemen Laman

">Setelah itu pilih Tambah Gadget 

">Kemudian Tambahkan HTML/JavaScript

">Dan Copy dan kode di bawah ini :

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;">
<img src="URL Gambar"></a>

">Kode berwarna biru bisa sobat ganti  dengan URL gambar pilihan Sobat 

">Kode berwarna hijau bisa sobat ganti letak widget ( kanan / kiri)

">Save Template

sumber :http://kediri-blognet.blogspot.com

Share on Google Plus

About Dadan Pauzan

Kami merupakan salah satu komunitas yang hobi menulis artikel di blog, main game, ngoding, edit musik dan membuat video.