Sobat Blogger pasti sudah tahu apa itu tombol Back To Top? Tombol ini berfungsi untuk langsung naik ke atas pada halaman web/blog dengan sekali klik, sehingga tidak perlu menggunakan scroll pada mouse lagi. Untuk memasangnya di blogger cukup mudah. Di sini saya akan membahas bagaimana memasang tombol back to top di blogger. Bagi sobat yang tertarik silahkan ikuti langkah di bawah ini.
1. Loggin ke akun blogger sobat
2. Pilih Design lalu Edit HTML
3. Pasang kode di bawah ini di atas tag </head>
<!-- SCROLLING BACK-TO-TOP -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template sobat sudah terdapat script jQuery 1.3.2, maka sobat tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template sobat sudah terdapat script jQuery 1.3.2, maka sobat tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->
4. Kalau sudah sobat cari kode <body> kemudian tambahkan atribut id='top' di dalam kode <body> tadi sehingga hasilnya seperti ini <body id='top'>
5. Langkah yang terakhir sobat cari kode </body> letaknya paling bawah di atas tag HTML, dan pasang kode berikut di atas kode </body> tadi.
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='http://g.imagehost.org/0439/arrow_1.jpg' style='right:20px;bottom:20px;position:fixed'/></a>
</div>
<a href='#top' title='Go to Top'>
<img src='http://g.imagehost.org/0439/arrow_1.jpg' style='right:20px;bottom:20px;position:fixed'/></a>
</div>
6. Simpan pekerjaan sobat.
Ket : http://feryinteristi.fileave.com/arrow2-green-32.png bisa di ganti dengan url gambar sobat. Untuk download gambarnya klik Di sini kemudian upload gambar ke image hosting sobat lalu copy direct link-nya.
Semoga bermanfaat.
Alhamdulillah...
Artikel Terkait:
Categories:
Tutorial Blogger
1 komentar:
kang, udah di coba dan alhamdulillah berhasil... makasih yach atas infonya... ^^
salam dari blogger pemula... :)
Posting Komentar