Cara membuat tombol back to top atau kembali ke atas di blog, yang akan muncul ketika halaman blog di scroll kebawah. Letaknya berada di bawah sebelah kanan dan jika tombol itu di klik, maka halaman blog akan kembali keatas dengan pelan, dan tombol itu pun akan menghilang.
Seperti contoh gambar diatas, gambar cicak itu akan keluar jika halaman blog sudah di scroll ke bawah dan akan kembali menghilang ketika halaman blog yang dibuka sudah diatas lagi. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
- Silakan login ke blogger, dan pilih pengaturan template.
- Klik edit html dan cari kode </body>
- Lalu masukan kode berikut ini diatas </body>
- Selanjutnya cari kode ]]></b:skin> dan masukan kode berikut ini ke atasnya.
- Save template, dan coba buka salah satu halaman blog kamu. Lalu scroll ke bawah, sudah ada atau belum tombol back to top nya. Jika sudah silakan disave template.
- Jika Belum, coba masukan kode berikut ini diatas </head>
- Lalu save template. Selesai.
<div id='ScrollToTop'>
<img alt='Kembali Ke Atas' height='68' src='https://lh3.googleusercontent.com/-DqAYBDzBDTc/UsG2Zlef7kI/AAAAAAAABos/HM8BLePVmwI/s148/ke%2520atas.png' title='Kembali Ke Atas' width='148'/>
<figcaption>Kembali Ke Atas</figcaption>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
<img alt='Kembali Ke Atas' height='68' src='https://lh3.googleusercontent.com/-DqAYBDzBDTc/UsG2Zlef7kI/AAAAAAAABos/HM8BLePVmwI/s148/ke%2520atas.png' title='Kembali Ke Atas' width='148'/>
<figcaption>Kembali Ke Atas</figcaption>
</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
#ScrollToTop{
text-align:center;
z-index:9999;
position:fixed;
bottom:40px;
right:30px;
cursor:pointer;
display:none;
opacity:0.7;
padding-top:4px}
#ScrollToTop:hover{opacity:1;}
figcaption {
text-align:center;
color:white;
text-shadow: 5px 5px 10px #000;
font-weight:bold;
font-size:10px;}
text-align:center;
z-index:9999;
position:fixed;
bottom:40px;
right:30px;
cursor:pointer;
display:none;
opacity:0.7;
padding-top:4px}
#ScrollToTop:hover{opacity:1;}
figcaption {
text-align:center;
color:white;
text-shadow: 5px 5px 10px #000;
font-weight:bold;
font-size:10px;}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Keterangan kode langkah 3:
- Tulisan ini Kembali Ke Atas bisa diganti dengan kata yang kamu inginkan.
- Nilai 500 ini, fungsinya ketika halaman blog discroll ke bawah sebanyak 500px maka tombol back to top akan muncul.
- Dan yang ini 700 fungsinya digunakan untuk mengatur kecepatan loading scroll ke atas, ketika tombol back to top ditekan.
Keterangan kode langkah 4:
- #ScrollToTop{ gunanya untuk mengatur posisi dan tampilan tombol back to top
- #ScrollToTop:hover{ ini untuk mengatur gambar ketika disentuh mouse
- figcaption { mengatur posisi dan warna dari tulisan Kembali Ke Atas.
Jika ingin hanya menggunakan tulisan back to top tanpa gambar, ganti kode dari langkah 3 dengan kode dibawah ini.
<div id='ScrollToTop'>Kembali Ke Atas</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
Save template, selesai. Semoga bisa bermanfaat untuk anda.<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
