Cara Buat Tombol Kembali ke Atas , Back To Up Button

Cara Buat/ Menambah Tombol Kembali ke atas di blogspot blogger
Sekarang sudah banyak kita temui template yang menggunaan tombol kembali ke atas/ back to up ( Back To Up Button). Untuk mempermudah penggunaannya biasanya tombol ini diletakkan sebelah bawah, samping kanan blog. Ketika tombol ini di klik maka otomatis halaman blog/ website akan menuju ke header blog.

ketika kita membaca artikel di blog, tentunya page akan tergeser ke bawah, apalagi jika artikelnya panjang banget, mungkin ada yang ingin kita ulang baca pada awal paragraf, misal ketika kita baca artikelnya nyampai tengah ataupun sudah sampai akhir artikel. bila kita klik tombol ini, otomatis page akan scrool ke atas.  Jadi kita tidak perlu scrool mouse atau touchpad untuk kembali ke awal artikel atau header sebuah blog.

Baca Juga Cara Memasang Script Anti Copy di Blog

Kalau di blog anda belum tombol ini, anda bisa menambahkan tombol kembali ke atas tersebut, anda bisa bisa menyisipkan kode script seperti  penjelasan di bawah ini.

1. Pastikan dulu di template blog  sudah ada kode jquery.  Kurang lebih kodenya seperti ini:

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

Atau seperti ini,

<script src='http://code.jquery.com/jquery-1.11.0.min.js' type='text/javascript'/>

Kalau belum ada kode salah satu jquery diatas, maka  anda harus menyisipkan dulu:

- Tema >> Template  >> Edit HTML
- Pada bidang HTML tempale Cari kode </head> ,  ( untuk mencari tekan Ctrl + F pada keyboard,  ketikkan </head>, kemudian Enter)
- Silahkan gunakan salah satu kode jquery di atas  dan tempel di atas kode </head>, kodenya bisa anda copy dibawah ini

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

- Simpan template

2. Setelah template anda tersimpan. Lanjut klik halaman Tata Letak
3. Klik "Tambahkan Gadget" untuk lokasi bebas.
4. Pilih "Javascript/HTML"
5. Salin dan tempel kode berikut ini:

<style> .mbw-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer; } </style> <img class="mbw-back-to-top" src="Ganti alamat URL di sini" /> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.mbw-back-to-top').fadeIn(duration); } else { //www.mybloggersworld.com jQuery('.mbw-back-to-top').fadeOut(duration); } }); jQuery('.mbw-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

 Tulisan Ganti alamat URL di sini, silahkan ganti dengan link gambar yang akan anda tampilkan

6. Widget tersebut tidak perlu dikasih judul, simpan template.
7. Alternatif lain anda juga bisa menyisipkan kode tersebut di template blogger langsung, namun untuk aplikasinya silahkan di pratinjau dulu sebelum di simpan.

Demikian uraian singkat mengenai Cara Buat Tombol Kembali ke Atas , Back To Up Button. Semoga bermanfaat, jangan lupa like & Share.

ADS HERE !!!