Cara Membuat Tombol Back To Top Blog | Teks Micro

Minggu, 12 Mei 2013

Cara Membuat Tombol Back To Top Blog

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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

1 komentar

  1. nice tips gan. itu link buat gammbar panah nya dimana ya ?

    jgn lupa mampir ke http://jnthnzazg.blogspot.com

    BalasHapus

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Teks Micro
Designed by Blog Thiet Ke
Posts RSSComments RSS
Back to top