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

Cara Membuat Tombol Go Top/Back To Top

22 May. 201140 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. Membuat Tombol Facebook Like Tanpa Plugin
  2. Cara Membatasi Jumlah Karakter Komentar
  3. Saran Dari Google Adsense Tentang Tata Letak Dan Navigasi
  4. Cara Install Plugin WordPress
  5. Cara Mengganti Username Dan Password WordPress
  6. Cara Membuat Halaman (Pagination) Pada Postingan
  7. Cara Setting Plugin All in One SEO Pack
  8. Cara Setting Expired Header
  9. Cek Performa Blog Dengan Firebug Dan Page Speed
  10. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  1. 3-2-2013 at 12:53 | #1

    Mksh atas tutorialnya. 100% working by me. udah dicoba di bantenia[dot]com. Berhasil

    Reply

  2. 3-2-2013 at 12:54 | #2

    Mksh atas tutorialnya. 100% working by me. udah dicoba Berhasil

    Reply

  3. 11-12-2013 at 00:30 | #3

    makasih gan, hampir smua tulisan agan ane baca n praktekkan, untuk yang ini masih support, namun ada beberapa tutorial yang tidak support di web ane…terimakasih gan

    Reply

  4. 5-9-2014 at 14:12 | #4

    Salam Kenal dari Jogja … God sites and design

    Reply

  5. 11-7-2015 at 17:16 | #5

    makasih banyak mas…tipsnya bermanfaat mas

    Reply

  6. 27-9-2016 at 13:21 | #6

    Terima kasih pak atas postingan yang berharga ini. Ini salah satu web yang menyediakan tutorial wordpress bagi pembacanya.

    Reply

Comment pages
1 2 3 42371
1+7=? (Wajib diisi)