Cara Menciptakan Tombol Back To Top

Cara menciptakan tombol back to top atau kembali ke atas di blog, yang akan muncul dikala halaman blog di scroll kebawah. Letaknya berada di bawah sebelah kanan dan bila tombol itu di klik, maka halaman blog akan kembali keatas dengan pelan, dan tombol itu pun akan menghilang.

Seperti referensi gambar diatas, gambar cicak itu akan keluar bila halaman blog sudah di scroll ke bawah dan akan kembali menghilang dikala halaman blog yang dibuka sudah diatas lagi. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dan pilih pengaturan template.
2. Klik edit html dan cari instruksi </body>
3. Lalu masukan instruksi berikut ini diatas </body>
<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>
4. Selanjutnya cari instruksi ]]></b:skin> dan masukan instruksi berikut ini ke atasnya.
#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;}
5. 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.
6. Jika Belum, coba masukan instruksi berikut ini diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
7. Lalu save template. Selesai.

Keterangan instruksi langkah 3:

• Tulisan ini Kembali Ke Atas dapat diganti dengan kata yang kau inginkan.
• Nilai 500 ini, fungsinya dikala halaman blog discroll ke bawah sebanyak 500px maka tombol back to top akan muncul.
• Dan yang ini 700 fungsinya dipakai untuk mengatur kecepatan loading scroll ke atas, dikala tombol back to top ditekan.

 Keterangan instruksi langkah 4:

• #ScrollToTop{ gunanya untuk mengatur posisi dan tampilan tombol back to top
• #ScrollToTop:hover{ ini untuk mengatur gambar dikala disentuh mouse
• figcaption { mengatur posisi dan warna dari goresan pena Kembali Ke Atas.

Jika ingin hanya memakai goresan pena back to top tanpa gambar, ganti kode dari langkah 3 dengan instruksi 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 dapat bermanfaat untuk anda.