12/27/2015
Pada kesempatan kali ini, ane bakal ngebahas cara memasang tombol back to top di blogger. Sebelumnya ane kasih penjelasan dulu sedikit, apa itu tombol back to top. Tombol back to top ialah suatu tombol yang berfungsi untuk mempermudah pengunjung blog untuk kembali ke bagian atas blog.
Dengan adanya tombol back to top pengunjung tidak usah bersusah - susah menggeser scroll, tinggal klik maka langsung ke bagian atas blog. Langsung aja gan, C A R A N Y A :
1. Pilih salah satu dari kode dibawah ini, lalu copy dan paste kan di atas kode </head>
Dengan adanya tombol back to top pengunjung tidak usah bersusah - susah menggeser scroll, tinggal klik maka langsung ke bagian atas blog. Langsung aja gan, C A R A N Y A :
1. Pilih salah satu dari kode dibawah ini, lalu copy dan paste kan di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
atau
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2. Kalau sudah klik save
3. Klik Tab Tata Letak
4. Klik Tambahkan Gadget
5. Klik Javascript/HTML
6. Copy dan Paste kan kode di bawah ini
<style>
.mbw-back-to-top
{position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;}
</style>
/*****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>
.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCT1bAH6m1tM006NNO2tfnreSto0f_lV4jL0U1V41ZGgpjY2ESF6WugpTFWPToxHaMoUPEwqa_S1eU1xJSnBsSwL3mN9BucATNkMBBPpWepAF7dh7x8Mm6CH4XwuWXHRBshLeHwpM80vI/s1600/back+to+top.png" />
<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>
NB: Tulisan yang berwarna biru adalah gambar dari "back to top" yang akan ditampilkan, ganti sesuai keinginan agansumber: http://inkompinfo.blogspot.co.id/2015/08/cara-memasang-tombol-back-to-top-di.html
