Memasang tombol back to top di blogger

Tombol back to top berfungsi untuk mengembalikan posisi halaman ke posisi paling atas blog secara otomatis tanpa harus melakukan scroll manual. Jika halaman blog kamu terlalu panjang, tombol ini dapat mempermudah pembaca blogmu sehingga tidak membuat jenuh untuk srcoll manual berulang-ulang halaman blog yang panjang.

Untuk penempatan tombol back to top sebenarnya bisa ditaruh dimana saja, tapi pada artikel ini saya memberikan trik memasang tombol back to top melayang disamping kanan blog dengan ditambah efek scroll dan auto hide yang lebih enak dipandang mata ;D

Cara memasang tombol back to top di blogger

1. Masuk ke Dashboard Blog, pilih Tata Letak


2. Kemudian pilih Tambah Gadget

3. Selanjutnya pilih HTML/JavaScript

4. Salin kode dibawah ini dan pastekan di dalam Gadget HTML/JavaScript

copy paste kode ini:

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

<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/AVvXsEi_PB4FQIFVmi0SVfwP4SvlfLq7vO1oqwmCYfUjkOZK4u5JFfVEh7AH-sDqNR05BppU7ABpGj2UJq9choLqB-sVu56_kn2v4JWOcEFg2GbiIad4hgdhPjq603kPUXnIRQNqy97f3kFirIHs/s102/way2blogging.org.ui.totop.png) no-repeat left top;
}
#w2btoTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_PB4FQIFVmi0SVfwP4SvlfLq7vO1oqwmCYfUjkOZK4u5JFfVEh7AH-sDqNR05BppU7ABpGj2UJq9choLqB-sVu56_kn2v4JWOcEFg2GbiIad4hgdhPjq603kPUXnIRQNqy97f3kFirIHs/s102/way2blogging.org.ui.totop.png) 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://gragasanit.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"> </script>
<script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>

5. Yang terakhir Simpan

Tombol back to top sudah terpasang di blogger