Tambahkan Tombol Gulir Ke Atas Dengan Jquery Ke Blogspot

Sedikit tips agar blog kita mudah di akses dan bekerja dengan sangat halus, kebanyakan dari blog kita sampai panjang kebawah dan untuk balik ke atas lagi kita harus mengulir scrol mouse. nah di sini akan coba saya berikan tips sederhana agar bagaimana kita kembali ke atas blog hanya sekali klik, dengan Jquery.

Bagaimana Menambahkan Gulir ke tombol Atas yang halus dengan plugin Jquery, sangat mudah dan simpel hanya dengan beberapa langkah, oke... Sobat


DEMO
Gulir halaman ini ke bawah dan lihat demo di kanan bawah, Klik Tombol Panah Keatas.

Langkah 1: Menambahkan Plugin Jquery JavaScript (Abaikan langkah ini jika blog Anda sudah punya Plugin Jquery)

a. Pergi ke Dashboard Blogger >> Rancangan >> Edit Html
b. Cari </ head> tag (Ctrl + F)
c. Tambahkan kode dibawah ini Sebelum </ head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

Langkah 2: Menambahkan Script Gulir ke Atas

a. Pergi ke Dashboard Blogger >> Rancangan >> Edit Html
b. Cari </ head> tag (Ctrl + F)
c. Tambahkan kode dibawah ini Sebelum </ head> tag dan Simpan Template Anda.

<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_jkcX0ac2Ec0pQ5N2vwptwhil8fG5zfsEaLMFhRYVWQI0_uRSe6M0Uwy7aExCyUrpie0cpjrrWxr5unIl1z1HKL-4N_oEV7PNF4G9_aJ6q8HcMV5nKWDYkH4qJSPPbUPgZMw4CSRl-Pu3/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_jkcX0ac2Ec0pQ5N2vwptwhil8fG5zfsEaLMFhRYVWQI0_uRSe6M0Uwy7aExCyUrpie0cpjrrWxr5unIl1z1HKL-4N_oEV7PNF4G9_aJ6q8HcMV5nKWDYkH4qJSPPbUPgZMw4CSRl-Pu3/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); });
</script>

Selesai...
Selamat mencoba...
Jangan lupa Comment Untuk Kemajuan kita bersama.