Membuat Tombol Back To Top Blogger

back_to_top_button
Berbagai macam cara dilakukan untuk mempermudah pengunjung saat mengunjungi halaman blog kita. Tombol Back To Top adalah salah satu yang sering digunakan dan berfungsi untuk mempercepat proses scroll ke bagian atas. Biasanya button ini terpasang di sebelah kanan atau kiri bagian bawah widget. Pembuatannya cukup mudah dan simple, karena hanya menggunakan script CSS biasa tanpa menggunakan JQuery. Bagaimana cara memasangnya? Ikuti panduannya yang akan saya jelaskan berikut ini.

Cara Membuat Tombol Kembali Ke Atas di Blogspot :
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget, anda dapat menaruhnya bebas di letak apapun.
4. Pilih HTML/Javascript.

Copy Kode berikut : <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="link URL gambar" /></a></div>

5. Save Template.
Anda dapat mengganti link URL gambar dengan gambar panah ke atas yang anda inginkan. Atau dapat menggunakan opsi ke 2.

Add Go To Top Button with CSS for Blogger :
1. Login ke akun blogspot anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </body> dengan menggunakan CTRL + F (Search Find)
4. Letakkan kode berikut diatasnya atau sebelum kode </body>
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>
5. Simpan Template.

Demikian tutorial blogspot yang mudah dan simple mengenai Cara Memasang Tombol Back To Top. Anda dapat mengikuti panduan menarik lainnya yang dapat anda pahami dengan mudah seperti Cara Membuat Efek Zoom Pada Gambar , Benarkah Keyword Density tepat untuk SEO, dan Download Prmeium Template Free .

18 comments:

  1. Makasih Mas 'back to top' nya..gampang kali yaa

    ReplyDelete
  2. Kalo tomblonya di sisi kanan bisa nggak ?

    ReplyDelete
    Replies
    1. tinggal ditambahkan float : right ;
      selamat mencoba :)

      Delete
  3. Replies
    1. ok jgn lupa link sumber dan donasinya :D

      Delete
  4. makasih mas,, tapi kalo mau yg di tengah bawah bisa gak..?

    ReplyDelete
    Replies
    1. bisa mas, kalau mau ditengah tinggal diganti right nya menjadi
      right = 500px ;

      Atau bisa juga mas menyesuaikan ukurannya sendiri.
      selamat mencoba.

      Delete
  5. not work di blog saya
    artenergic.blogspot.com
    mohon bantuannya...

    ReplyDelete
  6. wah keren gan. bisa dicoba diblog sy yg belum ada ntu..

    Dan bagi yang ingin melengkapi breadcrumb (penting buat seo lho) silahkan kunjungi di sini
    >> http://thejutsu.blogspot.com/2013/03/membuat-breadcrumb-di-blogger.html

    ReplyDelete
  7. infonya mantap & bermanfaat sob..
    salam kenal ya :)
    thx a lot

    ReplyDelete
  8. makasih mass infonya..
    Daftar Web yang menyediakan info seputar bola,
    prediksi bola ter-update..
    berita bola TERBARU DAN TERPERCAYA ada di pastibet.com , bola368.com , bola368.net , bola368.org
    Buruan Gabung..!!

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template