Membuat sebuah
tombol back to top (kembali ke atas)
dengan efek geser yang halus ke atas bisa jadi merupakan salah satu
fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat
dengan tampilan dan sentuhan yang cukup elegan.
Tombol back to top memiliki peranan cukup penting bagi sebuah blog
atau website dengan konten yang berat dan memiliki halaman yang panjang.
Untuk website yang memiliki banyak informasi pada halamannya, akan
membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke
bawah halaman.
Sedangkan tombol ini memberikan fungsi baik cara untuk melompat ke
atas dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini
adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak
konten-konten yang lainnya.
DEMO mirip di Blog ini
Bisa jadi jika sebuah blog yang sulit untuk dijelajahi, maka akan
membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to
top ini tidaklah memberatkan, serta tombol ini juga kompatibel untuk
hampir kebanyakan browser / peramban.
Dengan kode tersebut dibawah anda pun dapat mengedit sebagaimana
mestinya sesuai keinginan, seperti efek fade in dan fade out, serta
gambar tombolnya.
Tutorial dibawah ini menunjukan
cara membuat tombol back to top dengan mudah dan cukup singkat, hanya memerlukan waktu beberapa menit saja. Berikut langkah-langkahnya.
1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode
</head> menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode
</head> Tapi jika anda sudah menerapkan kode ini,
maka lewati langkah ini. Kode dibawah ini sangat umum digunakan di berbagai blog dengan banyak versi.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
Versi yang lain disediakan oleh jquery sampai sekarang adalah
versi:
2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.10.2,
1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1,
1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4,
1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3 ...untuk mengetahuinya cari di kotak pencarian dengan kata kunci ajax/libs/jquery jika ada maka lewati langkah diatas.
7. Masih di tempat yang sama - Cari kode
</head>
8. Masukan script dibawah ini diatas
</head>
<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>
Keterangan script tombol back to top
Warna
Biru adalah jarak tombol back to top muncul dan tersembunyi
Warna
Hijau adalah kecepatan pada saat melompat ke atas
9. Cari kode
]]></b:skin>
10. Masukan kode CSS dibawah ini diatas
]]></b:skin>
#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}
Warna
Hijau adalah posisi dari tombol tersebut.
11. Cari kode
</body>
12. Masukan kode di bawah ini di atas
</body>
<div id='ScrollToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>
Warna
pink adalah link
dari gambar tombol back to top, sebaiknya diganti / disave dan upload
menggunakan tempat upload gambar masing-masing.
13. Save Template dan lihat hasilnya.
Demikian cara membuat tombol back to top dengan tampilan yang cukup menarik, semoga dapat bermanfaat.
Sumber: http://www.aura-ilmu.com 
