Cara Membuat Tombol Back To Top Di Blogger - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Rabu, 09 Februari 2011

Cara Membuat Tombol Back To Top Di Blogger

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(){
$(&#39;a[href*=#top]&#39;).click(function() {
if (location.pathname.replace(/^\//,&#39;&#39;) == this.pathname.replace(/^\//,&#39;&#39;)
&amp;&amp; location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length &amp;&amp; $target || $(&#39;[name=&#39; + this.hash.slice(1) +&#39;]&#39;);
if ($target.length) {
var targetOffset = $target.offset().top;
$(&#39;html,body&#39;).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://feryinteristi.fileave.com/arrow2-green-32.png' 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...

12 komentar:

  1. Thanks gan, di coba dulu gan...

    BalasHapus
  2. infonya mantap.... kunjungan balik gan

    BalasHapus
  3. @udit : silakan sob, moga berhasil . .

    @doni : siip gan

    @master : yoi gan..meluncur nih

    BalasHapus
  4. klo merubah HTML <body> apa tdk menyalahi TOS Blogger? mending buat css baru diatas header : misal #wrap{.....} yg diletakkan dibawah <body>

    BalasHapus
  5. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    BalasHapus
  6. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus


  7. ditunggu artikel selanjutnya gan

    BalasHapus

Post Top Ad

Space Iklan