Home » Optimasi Wordpress » Cara Membuat Tombol Go Top/Back To Top

Cara Membuat Tombol Go Top/Back To Top

22 May. 201144 comments
Cara Membuat Tombol Go Top/Back To Top

Salah satu navigasi yang akan memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman (scroll) dengan cepat yaitu adanya tombol go top atau back to top yang biasanya terpasang pada bagian footer. Beberapa theme Woordpress ada yang sudah menyertakan tombol tersebut tapi ada juga yang belum.

Blog ini tadinya juga ada tombol go top atau back to top bawaan dari theme inove yang saya gunakan, tapi karena menggunakan gambar dan javascript akhirnya tombol tersebut saya lepaskan. Dan baru hari ini (baru sempat) tombol go top atau back to top tersebut saya pasang kembali di blog ini setelah sedikit saya modifikasi dengan tanpa menggunakan gambar dan javascript.

Jika ada yang berminat berikut ini cara membuatnya :

1. Buka file footer.php, bisa lewat dahboard, cpanel atau FTP.
2. Kemudian tambahkan kode HTML berikut ini di dalamnya :

<a href="#" id="gotop" rel="nofollow" name="gotop">Go Top &uarr;</a>

Penempatan kode silahkan disesuaikan dengan kode-kode yang lain yang ada di bagian footer tersebut, seperti kode tentang blog info, theme info dll. Anda bisa mengganti karakter /logo ↑ (&uarr;) dengan Δ (&Delta;)

3. Untuk pengaturan posisinya tambahkan kode CSS berikut ini ke dalam file CSS yang anda gunakan.

a#gotop
{float:right;
  height:16px;
  display:block;
  padding-left:16px;
  margin:5px 15px 0 0;
  text-decoration:none;
  line-height:18px;
  font-size:11px;}

Catatan : Tombol Go Top/Back To Top ini sengaja saya buat tanpa menggunakan gambar dan javascript supaya loadingnya tetap ringan. Jika ada yang menginginkan menggunakan gambar anda bisa menambahkan URL gambar anda sebagai background pada ID gotop properties tersebut di atas.

Jika ada yang kurang pada tutorial tersebut di atas silahkan anda tambahkan pada bagian komentar.

Cara Membuat Tombol Go Top/Back To Top Reviewed by: Alwi on Rating : 5
Mudah-mudahan artikel tentang Cara Membuat Tombol Go Top/Back To Top ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Cara Membuat Breadcrumb Di WordPress
  2. Menampilkan Related Post Tanpa Plugin
  3. Cara Membuat CDN Dengan Subdomain
  4. Cara Mendisable Akses Directory WordPress
  5. Cara Membuat Halaman (Pagination) Pada Postingan
  6. Cara Membuat Social Media Sharing Tanpa Plugin
  7. Cara Menonaktifkan Fungsi Thumbnail
  8. Cara Mudah Menuliskan Karakter Khusus
  9. Cara Membuat Spoiler
  10. Cara Mencegah Copy Paste Dengan CSS
  1. 25-5-2011 at 08:17 | #1

    nice info gan…

    thanks ya….

    Reply

  2. 25-5-2011 at 19:03 | #2

    Tidak ada yang perlu ditambahkan lagi Mas, tapi kalau saya tetap senang menggunakan javascript biar pergerakannya lembut…he..he..he…

    Reply

    Alwi Reply:

    Dulunya juga pakai javascript dan seperti Bang Rudy bilang efek gerakannya jadi lebih halus, tapi saya lebih seneng yg cepet2 heee dg menghilangkan/memangkas javascript supaya javascript keseluruhan di blog ini bisa minimalist dan loading bisa ngacir

    Reply

    Rudy Azhar Reply:

    Yup, betul mas, loading blog ini kenceng bangget apa karena perbedaan css setiap elemennya ya? CSS untuk homepage berbeda dengan css pada single post.
    —————————————————————
    Itu baru salah satu cara yg saya terapkan di blog ini sehingga ukuran file untuk home jadi kecil, kemudian kompressi auto dg zlib terhadap semua file php, html, css, javascript, penggunaan CDN buatan sendiri, pemangkasan kode2 PHP di dalam theme, pemangkasan queri dan jumlah http, dll

    Reply

    dHaNy Reply:

    Hasilnya bener2 ngacir ya mas.. bahkan untuk koneksi lemot sekalipun tetep bisa membuka tanpa hambatan…

    Reply

  3. unomo
    25-5-2011 at 21:30 | #3

    mas saya baru 10 hari belajar wordpress.. ak salut dengan materi yg mas alwi berikan.. ak selalu datang website ini sebagai panduan.. nah mas skrng ak lg bingung membuat Feed (ak udh sana kemari cari ngak ad2).. tolong bantuannya ya mas..hehee

    Reply

  4. 26-5-2011 at 09:59 | #4

    info-info yang sangat berguna mas, tankz..

    Reply

  5. 30-5-2011 at 09:32 | #5

    makasih infonya mas,,,

    Reply

  6. 31-5-2011 at 10:19 | #6

    posting yang sangat menarik sekali,sangat berguna dan membantu,,,makasih dah berbagi,,

    Reply

  7. 2-6-2011 at 16:08 | #7

    berguna banget nich utk blog yg memiliki isi panjang kebawah..
    jd visitor ga perlu lagi scroll mouse ke atas.. cukup klik “Go Top”
    sprti blog m-alwi.com ini :D

    Reply

  8. 3-6-2011 at 05:40 | #8

    mataaap mas alwi sy ambil banyak ilmu dr webna…

    Reply

  9. 3-6-2011 at 11:16 | #9

    Terima kasih atas informasinya.

    Reply

  10. 6-6-2011 at 16:11 | #10

    cucok nih diterapkan di website ane yang height nya panjaaaannggg banget, biar pengunjung ndak capek2 ulir mouse,.. :)

    Reply

Comment pages
2+4=? (Wajib diisi)