Cara Membuat Tombol Back to Top Simple Fast Loading di Blog

20.21
 Tombol Back to Top
Cara Membuat Tombol Back to Top Simple Fast Loading di Blog Blogspot.

BACK to Top Button (tombol kembali ke atas) yaitu tombol berupa ikon gambar panah yang memudahkan pengunjung untuk kembali ke bagian atas halaman blog.

Dengan adanya tombol back to top ini, pembaca tidak usah scroll mouse atau "tap" layar, tapi tinggal klik tombol back to top, maka otomatis tampilan halaman akan bergeser ke bagian atas.

Disebut  Simple & Fast Loading karena cara pemasangannya sangat mudah dan tidak banyak kode sehingga tampilannya cepat, tidak mempengaruhi kecepatan loading blog.

Cara Membuat Tombol Back to Top di Blogspot

1. Layout -> Add Gadget
2. Pilih "HTML/Java Script"
3. Judulnya kosongkan.
4. Masukkan kode di bawah ini ke bagian "Content"

<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:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeofKP1PzO1GNPpwXF1QwiJRzRaBL8s5yVlasuuRgTSoNE7IGXdzMzJAxM9OWp0r1ndj8Ujrmzg6XoJI5pJl1dkSeIjW6JmsbxAfxpodKS9owmromu2ZC3Fd97NulUrKjmvP83sQ-psE_d/s1600/Back_to_top_icon.png" alt="Kembali ke Atas" width="60"/></a></div>


Kode yang berwarna merah adalah URL/Link gambar. Anda bisa menggantinya dengan gambar panah pilihan Anda.

5. Save!

Kini tombol back to top sudah ada di blog Anda, seperti yang ada di blog ini --di sebelah kanan bawah. (http://baticblog.blogspot.com).*

Sumber

Share this :

Previous
Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔