Cara Membuat Link Back to Top pada Footer Blog
Salah satu manfaat keberadaan quick link (jump-link) pada suatu blog yaitu menghemat tenaga dan waktu pengunjung, tepatnya ketika ingin langsung menuju area tertentu di halaman blog tersebut. Misalnya ketika ia ingin kembali ke header halaman setelah berada di footer.
Nah, kita bisa gunakan jump-link berupa back to top pada footer. Jika link tersebut diklik, maka pengunjung akan langsung dibawa menuju ke halaman atas. Prosesnya sangat cepat bagaikan kilat. Tidak ada efek scrolling seperti halnya penggunaan plugin scroll to top.
Bagi yang lebih senang dengan kecepatan (ketimbang tampilan visual dan efek menarik), maka membuat jump-link tanpa plugin bisa jadi pilihan yang sangat baik.
Bagaimana cara membuat link back to top pada footer?
- Khusus pengguna wordpress.org, silakan anda login dulu ke akun wordpress anda. Lalu buka menu Appearance pada sidebar kiri. Kemudian klik editor. Buka
footer.php. Lalu carilah kode seperti berikut ini.<div id="footer-credits"> keterangan kredit footer bla bla bla </div><!-- #footer-credits -->
Di bagian itulah kode back to top bisa anda isikan nantinya, tepatnya setelah keterangan bla..bla..bla)
- Ini dia kode jump-link back to top yang harus anda sisipkan di bagian footer credits :
<a href="#" rel="nofollow" onclick="MGJS.goTop();return false;" title="kembali ke atas"><strong>Back to Top</strong></a>Kode di atas bisa anda sisipkan setelah keterangan kredit pada footer blog anda. Dalam hal ini, setelah bla..bla..bla.. (pada contoh kode sebelumnya).
- Agar ada sedikit spasi sebelum jump-link tersebut, anda bisa tambahkan kode
sebelum kode kurung siku pembuka atau tepatnya sebelum kode <a - Klik UPDATE FILE. Lalu lihatlah hasilnya pada halaman blog anda (home atau single-post). Coba klik jump-link yang sudah anda sisipkan tersebut.
- – -
Oya, anda juga bisa menyisipkan link back to top ini lewat Cpanel hostingan anda. Alamat direktorinya yaitu :
http:// namadomainanda/cpanel/sites/namadomainanda/www/wp-content/themes/nama-theme-yang-anda-gunakan/footer.php
Untuk pengguna blogger/blogspot bagaimana?
Gampang saja, coba sisipkan kode jump-link di atas pada menu Edit HTML khususnya pada bagian footer/credits. Tidak jauh beda dengan penerapan pada blog wordpress kok.
Semoga berhasil. Jika ada masalah, silakan komentar pada kolom di bawah ini.
Menu Lainnya »» Atas » Depan » Arsip » Kontak » Bawah
Add KafeGue di Facebook 
Follow KafeGue di Twitter
Tautan Cepat »» Beri Komentar | Baca Ulang Posting
Baca Komentar | Menuju Posting Terbaru
Posting Terkait :
- Cara Meredirect 404 Not Found ke Halaman Daftar Isi di WordPress
- Daftar Celah Keamanan WordPress yang Perlu Ditutupi
- Menutupi Celah Keamanan Direktori Wp Content Themes WordPress
- Contoh Halaman Login Website WordPress yang Kena Deface
- Cara Menonaktifkan Emoticon di Dalam Postingan dan Komentar WordPress
WordPress 3.1
[...] cara membuat link back to top → tes hasilnya [...]
WordPress 3.1
[...] ketahui nilai pagerank-nya. Saya beri contoh salah satu halaman posting di blog ini yang berjudul Cara Membuat Link Back to Top. Perhatikan saja screenshot di bawah [...]
WordPress 3.0.4
[...] salah satu judul postingan saya yaitu cara membuat link back to top pada footer blog. Nah, pada keterangan ‘meta description’-nya saya isikan dengan [...]
WordPress 3.0.4
[...] Cara Membuat Link Back to Top pada Footer Blog [...]
Firefox 3.6 | Windows XP
Nice info boss, salam kenal ya …
Google Chrome 6.0.408.1 | Windows XP
@Johny, salam kenal juga bos. Makasih sudah berkunjung.
Firefox 3.6.2 | Windows XP
untuk blogspot bisa gak mas
Firefox 3.6.3 | Windows XP
Penulisan yang baik adalah dengan cara menampilkan arsip pertahun, kemudian perbulan, dan dilanjutkan dengan perjudul (postbypost) dengan batas 50 judul post. Tidak lupa, sertakan kalimat pendahuluan yang mendeskripsikan halaman daftar isi tersebut.
Internet Explorer 8.0 (Compatibility Mode) | Windows XP
info menarik, berguna banget, teruslah menulis terimakasih
Firefox 3.6.3 | Windows XP
Nanti deh saya coba. Soalnya blog saya bukan di account yang saat ini dibuka.
Thanks mas.
.-= Agung Prasetyo barusan nulis Kisah Sukses Sandhy Sondoro =-.
Firefox 3.6.3 | Windows XP
trik yang sangat ampuh walaupun cukup sederhana :-)
.-= imadewira barusan nulis Hasil Kualifikasi MotoGP Le Mans Prancis =-.
Firefox 3.5 | Windows XP
Mutar2 google, akhirnya nyangkut di sini.
Mantap Artikelnya mas Is, mau coba di terapkan. Thanks
Google Chrome 4.1.249.1064 | Windows XP
Bukannya malah merusak konsentrasi pengunjung blog, mas?
.-= Agus Siswoyo barusan nulis Blogroll, Oh Blogroll =-.
Namoroka 3.6.3 | Arch Linux
@Agus Siswoyo, maksudnya teks semacam ‘back to top’ itu terlalu menimbulkan distraksi gitu ya Mas Agus?
Mungkin saja. Tapi fungsi sederhana ini lebih menguntungkan dari sisi usability dan aksesibilitas. Terutama pengguna small screens/mobile devices dan screen readers.
.-= dani barusan nulis Teks Anchor Menuju URL Mana? =-.
Firefox 3.6.3 | Windows XP
@Agus Siswoyo, merusak dalam arti bagaimana ya mas? Saya masih agak bingung dengan maksud mas Agus.
Opera 9.52 | Windows XP
Wah ada kekacauan Master. File footer ada yang kedelete. Mana lupa backup. Error nih jadinya belom bisa kebuka blog ku :)
Firefox 3.6.3 | Windows XP
@Erdien, waduh Pak, berabe deh kalo gitu. Coba manfaatkan menu backup di Cpanel hostingan Pak Erdien. Coba buka file/direktori backup mingguan. Di situ biasanya ada file backup secara lengkap, termasuk isi file footer.php
Semoga ketemu ya Pak.
Opera 9.52 | Windows XP
@iskandaria, Alhamdulillah setelah utak-atik cari sana sini, bisa diatasi dengan jurus pamungkas. Theme yang dipake didellete aza dari CPanel, dan akhirnya bisa masuk lagi ke dashboard WP. Baru deh setting theme lagi. Cuman hasil berguru tadi harus diulang dari awal nih :)
Firefox 3.6.3 | Windows XP
@Erdien, syukurlah kalau begitu. Pengalaman berharga tuh..hehehe. Semoga jadi pembelajaran yang bagus Pak. Saya juga beberapa kali mengalami trial and error selama ngeblog di wordpress self hosting. Maklum, saya baru kenal WP dalam 3 bulanan ini Pak. Jadi belum pantes banget disebut sebagai master.
Kalo mister sih boleh lah :D
Opera 9.52 | Windows XP
Horeeee….
Lapor lagi My Master, “Teori ini berhasi ane aplikasikan juga. Ane pasang di bawah form komentar sama di footer”.
Hehehe…. Makasih Mas Is :sungkem
Firefox 3.6.3 | Windows XP
Apa kabar mas IS,maaf nih baru berkunjung lagi. :D
Aduh tidak artikel saya di duluin mas Is lagi :D
Setelah membaca komentar mas Is di blog saya mengenai plugin scrool to top itu memang ada rencana saya menulis yang manualnya, tapi sudah mas Is tulis :D
Sudah di coba disemua browser mas Is ? Kadang2 tidak semua browser support Mas :tkp
.-= satrya barusan nulis Jangan Lupa Backup Database Anda =-.
Firefox 3.6.3 | Windows XP
@satrya, belum saya tes di semua browser sih mas. Nanti saya cobain ya. Makasih banyak sudah mengingatkan hal sepele yang cukup penting tersebut :recsel
Firefox 3.5 | Windows XP
keknya blog saya masih belum perlu perlu amat mas.. tapi tutznya mantep nih.. siapa tau ntar perlu
.-= fanz barusan nulis Sports Betting =-.
Firefox 3.6.3 | Windows XP
Tips yang berguna bagi pemula seperti saya ini mas.
Salam Kenal Mas Iskandar, Saya ingin belajar banyak ne tentang HTML meskipun saya bukan lulusan TI tapi mudah2an mas iskandar bisa bantu saya..he..he..
Salam Hangat Mas.
.-= ismail barusan nulis Kadang Bayi Lebih Hebat Dari Kita! =-.
Firefox 3.6.3 | Windows XP
@ismail, salam kenal kembali ya mas. Senang sekali anda mau berkunjung ke blog baru saya ini. Untuk menguasai HTML kan nggak harus kuliah TI. Sekarang ilmu HTML udah banyak banget tersedia, entah itu dalam bentuk buku maupun secara online di internet. Kalo mau belajar secara online, tinggal ketik saja keyword “belajar html” atau “tutorial HTML” di google. Pasti akan muncul banyak sekali referensi belajar gratis.
Tapi kalau mas Ismail mau belajar secara terarah dan punya target yang jelas, saya sarankan untuk daftar kelas HTML Online Gratis saja. Lansung bisa praktek secara online dan langsung bisa dilihat hasilnya seketika. Lebih mempercepat pemahaman kita deh pokoknya.
Salam hangat kembali mas :shakehand2
Firefox 3.5.2 | Windows XP
di blog saya juga udah dipasang back to top karena tidak merepotkan pengunjung kalau harus scoll keatas lagi. kalau perlu buat juga scroll to buttom Mas, biar bisa scroll keatas dan kebawah juga..he..he..he….
Firefox 3.6.3 | Windows XP
@rudy azhar, kalo saya lihat, link back to top pada blog Bang Rudy menggunakan efek scrolling yach. Jadinya agak lamban. Kalo yang saya tulis di atas, efeknya jauh lebih cepat bang, sebab tidak ada efek menggulung ke atas saat link tersebut kita klik. Kalo scroll ke bawah, saya sudah pasang di blog ini pada menu navigasi atas, yaitu link Skip to Footer. Coba Bang Rudy klik link tsb :-)
Firefox 3.6.2 | Windows XP
Salam kenal dulu mas, untuk posting diatas saya belum terlalu ngerti, soalnya trauma kalo dah sampe edit html blog, kemarin saja coba ganti font juga banner.jpg nya ada yang hilang walaupun masih bagus. saya daftar belajar html saja yah,,,
.-= ago barusan nulis Page setup ms. Word 2007 (dari inchi ke cm) =-.
Firefox 3.6.3 | Windows XP
@ago, silakan daftar mas. Wong gratis kok kalo mau masuk kelas HTML online-nya. Wah, sampe trauma gitu. Sebelum edit HTML, sebaiknya dibackup dulu mas setelan kode lamanya, biar kalo error pas selesai ngedit, kita masih bisa mengembalikan settingan kode seperti semula. Salam kenal balik ya. Makasih sudah main ke sini.
Firefox 3.6.3 | Windows XP
Trims sekali infonya….mau coba pasang di blog saya…
.-= Anggara barusan nulis iPAD : SIHIR BARU APPLE Inc. =-.
Firefox 3.6.3 | Windows XP
@Anggara, semoga berhasil ya mas. Makasih.
Firefox 3.5.5 | Windows 7
Artinya cuma tinggal menambahkan link Back to Top yaw mas???
Kalo saya, lebih senang pakai plug-in scroll to top, efef scrollingnya mantap…. :thumbup:
.-= Gede Lumbung barusan nulis Malangnya Nasibmu, Moppy…!!! =-.
Firefox 3.6.3 | Windows XP
@Gede Lumbung, kalo menurut saya, efek scrolling malah bikin nggak nyaman mas. Kesannya lamban dan bikin mata agak gimana gitu. Beda persepsi yach kita.
Google Chrome 4.1.249.1064 | Windows 7
wuih, mantap..tapi nyoba nya artikel berikut kali ya..hehe
Google Chrome 4.1.249.1064 | Windows XP
Ok gan patut di coba!
Firefox 3.5.9 | Windows XP
Alhamdulillah berhasil mas
thx ya
.-= Ahmad IM-bisnis barusan nulis Kisah Kepompong =-.
Firefox 3.6.3 | Windows XP
@Ahmad IM-bisnis, selamat mas. Sudah saya tes juga tuh. Tapi warna linknya agak tenggelam dengan warna latar footer. Mungkin bisa diakali dengan menambahkan tag font warna berupa <font color=”#fff”>Kembali ke Atas</font>
Hasilnya anchor teks “kembali ke atas” akan berwarna putih. Atau bisa juga disetel lewat CSS dengan menambahkan atribut class (cara ini mungkin mas Ahmad belum mudeng yach..hehe)
Firefox 3.5.9 | Windows XP
@iskandaria, belum berhasil mas..
entar deh saya coba lagi
thx ya
.-= Ahmad IM-bisnis barusan nulis Hosting Murah Indonesia Indositehost.com =-.
Firefox 3.6.3 | Windows XP
@Ahmad IM-bisnis, semoga berhasil deh mas.
Namoroka 3.6.3 | Arch Linux
Fungsi tombol back di MSIE lawas, berfungsi ngga ya (setelah klik jump link itu, trus alt+left untuk kembali ke footer)?
Sedikit tambahan. Mungkin lebih enak ditambahkan class tertentu sehingga teks “back to top” itu tidak tercetak di CSS print (jika ada). :)
.-= dani barusan nulis Teks Anchor Menuju URL Mana? =-.
Firefox 3.6.3 | Windows XP
@dani, masih berfungsi Bli. Saya sudah coba tekan alt+left usai klik jump-link back to top. Ternyata kembali ke footer lagi. Saya malah baru tahu lho teknik tersebut. Sebenarnya ada satu lagi caranya, yaitu dengan menekan tombol HOME. Dengan syarat, klik dulu pada sembarang area halaman tersebut (asal jangan klik pranala/link). Lalu tekan tombol HOME pada keyboard.
Soal penambahan class yang Bli Dani maksudkan, saya masih agak bingung. Setahu saya, pemberian class tidak pada teks anchor, tapi lebih kepada id atau setelan linknya.
Namoroka 3.6.3 | Arch Linux
@iskandaria, di MSIE6 dulu katanya bermasalah dengan layer hasLayout di IE. Serupa masalahnya dengan “skip to main content”. Tapi, saya ngga punya IE6 lagi.
Untuk tombol HOME,sayangnya tombol HOME ngga ada di semua layout keyboard. Setidaknya, ngga ada di beberapa netbook. Termasuk netbook saya.
Yang penambahan class itu maksudnya supaya saat ctrl+p (print; jika ada), maka teks “back to top”-nya (kan) ngga perlu muncul/dicetak. Kan bisa make
span class?Untuk yang nbsp, di berkas xml atau xhtml murni, ngga ngefek make itu banyak-banyak, tetep dihitung satu. Kayak make XML di OpenOffice. Lagian, jika dua atau lebih pranala dengan alamat tujuan berbeda berdampingan, kan dianjurkan oleh WCAG untuk diselingi karakter non-printable/delimiter, misal | (vertical bar) atau lainnya. Supaya screen reader ngga salah baca seperti teks biasa. Saya dah pernah nulis tentang ini. :)
BTW,
kursor saya hilang/lompat entah kemana saat tabbing setelah ngisi komentar ini. Tabindex-nya sebaiknya dibuang aja. :)
Firefox 3.6.3 | Windows XP
@dani, wah, masukan yang bagus Bli. Maklum, pengetahuan HTML saya masih agak terbatas (tapi malah udah memberanikan diri nulis tutorial coding) :)
Sebenarnya kalau di blogspot pun tidak perlu menggunakan kode nbsp untuk ngasih spasi. Cukup tekan tombol spasi pada keyboard dan bisa dipisahkan dengan tanda | (vertical bar). Tapi pas saya coba di WP, ternyata harus diberi nbsp biar ada jarak sedikit.
Soal penggunaan
span class, ntar saya coba dulu ya. Mengenai pembuangan Tabindex, saya masih kurang mengerti cara membuangnya. Atau mungkin bli Dani sudah pernah menulisnya barangkali ya? Mau liat-liat dulu ke blog Dani Iswara :ngacir:Firefox 3.6.3 | Windows XP
@iskandaria, ralat sedikit Bli. Saya baru ngeh bahwa MSIE itu adalah Microsoft Internet Explorer. Yang saya cek pada Firefox sih bli (fungsi tombol alt+left). IE saya masih ada, tapi males kalo mau bukanya. Harus bongkar-bongkar pas mau mencari file-nya yang entah tersembunyi di mana :)
Firefox 3.5.2 | Windows XP
@iskandaria, mengikuti jejak bli dani
apakah dengan code² di atas sudah suport dengan beberapa browser modern mas is semisal opera, mozila dan lain²
Firefox 3.6.3 | Windows XP
@Blog Seputar SEO Series Tutorial, untuk link dengan kode di atas sepertinya tidak dipengaruhi oleh jenis browser yang digunakan kok Gus. Artinya, ia bersifat universal.
Namoroka 3.6.3 | Arch Linux
@iskandaria,
di fx:
1) ctrl+u
2) ctrl+f atau /, ketik kata ‘tabindex’,
3) f3 (next) beberapa kali (ada berapa tabindex-nya?)
4) buka kode sumber WP (mis. berkas comment, header, atau sidebar/search) di sisi admin
5) hapus tabindex. :)
Tabindex sudah pernah saya catat dulu. Entah yang di dot net atau dot com. :)
Di doctype transitional memang masih boleh memakai nbsp (non-breaking space) berderet.
.-= dani barusan nulis Teks Anchor Menuju URL Mana? =-.
Firefox 3.6.3 | Windows XP
@dani, sudah saya coba hapus Bli tabindex-nya. Berhasil. Kalo masih ada masalah saat mau komentar, silakan kasih tahu lagi bli :) Thx buat tipsnya.
Firefox 3.5.9 | Windows XP
wah baru ingat saya klo kode langsung komen ke kotak komentar belum saya pasang lagi :D
sekalian aja sama yang ini :thumbup:
.-= IHSAN barusan nulis Search Results in Search Results | Web Site/ Blog Auto Content | +++ =-.
Firefox 3.6.3 | Windows 7
Aha…. satu trik yang patut dijadikan referensi. Diamankan dulu… Kalau bisa semudah ini, maka ini bisa menghemat satu penggunaan plugin.
Panduannya lengkap banget, mas Is. Thanks ya…
.-= budiastawa barusan nulis Perkenalkan, Google Font API =-.
Firefox 3.6.3 | Windows XP
@budiastawa, tapi kalau Bli Budi lebih suka dengan tampilan visual image dan efek scrolling-nya, maka pilihan plugin lebih tepat kayaknya. Tapi sebenarnya cara di atas bisa juga menggunakan image/button sih. Tinggal sisipkan source-image pada linknya. Beres :-)
Firefox 3.6.3 | Windows XP
kayaknya ini cocok untuk weblog yang mempunyai banyak komentar..
simpen dulu ah,nanti di praktekin
.-= seo barusan nulis Perfect SEO Services =-.
Firefox 3.6.3 | Windows XP
Seperti ini juga bisa kan mas?
<strong><a href="#header" rel="nofollow">Back to Top</a></strong>
OOT: btw saya tidak bisa berkomentar kalau fitur javascript di peramban dimatikan.
.-= rismaka barusan nulis Sibuk mode ON =-.
Firefox 3.6.3 | Windows XP
@rismaka, bisa juga mas. Wah, soal nggak bisa komentar kalo javascript di-disable, saya juga kurang tau. Setau saya cuma nggak bisa mereply sih mas.
Opera Mini 4.0 | J2ME/MIDP Device
kayaknya ini cocok untuk blog yang mempunyai banyak komentar..
simpen dulu ah,nanti di praktekin
Firefox 3.0.15 | Windows XP
mungkin saya lebih suka dengan yang tidak memanfaatkan plugin dan lebih senang kaya postingannya mas is di atas, karena dapat menghemat diskspace pada kapasitas databasenya
Selain itu codenya mudah dipelajar dan mudah di pasang oleh narablognya
makasih atas infonya dan tutorialnya mas is,
saya ga bosan² mai ke sini terus
Firefox 3.6.3 | Windows XP
@Gus Ikhwan, makasih juga buat Gus Ikhwan yang sudah rajin berkunjung dan berkomentar di sini. Saya juga lebih suka pake link biasa kayak di atas (ketimbang pake efek scrolling).