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
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://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/s102/way2blogging.org.ui.totop.png) no-repeat left top;
}
#w2btoTopHover {
background:url(https://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/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>
<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://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/s102/way2blogging.org.ui.totop.png) no-repeat left top;
}
#w2btoTopHover {
background:url(https://lh5.googleusercontent.com/-dbSPMPByXN8/UGhc5Bm0ihI/AAAAAAAAAc0/FgjSFgtTNa4/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>
Tombol back to top sudah terpasang di blogger
Tidak ada komentar:
Posting Komentar