Cara Memasang Back to Top di Blog

Salah satu hal yang paling diperhatikan adalah Navigasi, bukan hanya untuk pembaca, search engine seperti google dan yahoo pun sangat menyarankan sebuah situs memiliki letak navigasi yang jelas, teratur dan tau kemana larinya. Navigasi kini pun sudah sangat beragam, salah satu diantaranya adalah yang biasa dikenal dengan "back to top". Fitur ini dapat menghilangkan "kemalasan" pembaca setelah melakukan reading untuk seluruh isi posting. Biasanya, untuk scroll ke atas saja bisa terasa berat. Kemalasan dan keberatan inilah yang mendorong adanya fitur "back to top". Penempatannya sangat fleksibel, namun biasanya terletak pada bagian bawah seperti credit link. Fitur ini memungkinkan pembaca untuk "scroll" otomatis ke bagian atas blog setelah "a:active". Mudahnya, pembaca hanya meng-klik text atau gambar yang dimodifikasi, kemudian akan langsung menuju ke bagian yang ditentukan.

Pemasangan dan penggunaan "back to top" sangat mudah sekali. Sebelum itu, ada baiknya sobat mengetahui 2 jenis "back to top". Dari semua jenis navigasi "back to top" yang akan di tampilkan, saya coba mulai dengan yang paling susah. Sobat harus tau 2 hal. Pertama, sobat harus tau kode html untuk gambar yang memiliki link. Mudahnya, kita perlu menempatkan kode html gambar sebagai isi dari tag a yang biasa diisi oleh teks atau tulisan. Contohnya seperti ini.

<a href="http://kupas-ampas.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_eKxVWm9ABq7imKzcVfidc-kaVpze2Xy95gVc4x_YwF_6JEKVsxc_sAbZ-RA-EFvfMWEKIU3wcweSFqT_VKR0L1RCHWjz7hyphenhyphennSJsKJKiyFPFGdzE1OncK83BasL0s048yeQqhA_abHE/s1600/header.png"></a>

Hal kedua yang sobat harus tau juga adalah bagian mana yang nantinya akan ter-scroll sendirinya. 2 bagian akan saya coba bahas yaitu #main-wrapper dan # sebagai hrefnya. Jika sobat meletakkan #main-wrapper sebagai hrefnya, maka scroll akan berhenti tepat sedikit di atas judul posting. Tapi jika sobat menggunakan hanya "#", maka scroll akan berhenti tepat seperti saat sobat membuka website tersebut pertamakali dan belum di-scroll sedikitpun.

Masih ada satu pilihan lagi buat sobat, yaitu menggunakan tulisan. Penggunaan tulisan (bukan gambar) sebagai anchor link menjadikan blog lebih seo dan cepat ketimbang sobat menggunakan gambar. Namun, jika sobat tetap ingin menggunakan gambar, pastikan ukuran gambar tidak mempengaruhi loading blog secara signifikan.

#1 "Back to top" Gambar Bagian Tertentu.
2 hal yang harus diperlukan, yaitu gambar dan bagian yang nantinya akan jadi sasaran. Sobat hanya perlu membuat gambar yang berlink kepada bagian tertentu yang sudah di pilih. Kode htmlnya seperti di bawah ini.

<a href="bagian sasaran"><img src="url gambar"></a>

Contoh bagian sasaran adalah #main-wrapper. Tapi nama nama ini relatif sifatnya. Tergantung pembuat template sobat.

#2 "Back to top" Gambar non-bagian.
Jenis ke-2 ini mungkin agak terdengar sedikit aneh. Namun jenis inilah yang menurut saya paling banyak dipakai. Hampir di setiap blog. Kode htmlnya seperti ini.

<a href="#"><img src="url gambar"></a>

Pastikan "#" sebagai tujuannya. Ini dimaksudkan agar nanti "back to top" bisa bekerja.

#3 "Back to top" Tulisan bagian tertentu.
Kode html untuk jenis ini hampir sama dengan jenis no 1. Perbedaanya hanya penggunaan tulisan, bukan gambar. Agar lebih pas, sobat sebaiknya menggunakan tanda arah panah ke atas.

<a href="bagian sasaran">Back to top ↑</a>

#4 "Back to top" non-bagian.
Sobat pasti udah ngerti, kan? Berikut kode htmlnya..

<a href="#">Back to top ↑</a>

Tulisan berwarna biru silahkan diganti berdasarkan keperluan dan kebutuhan masing masing.
Berdasarkan penelitian saya, jenis ke 3 dan ke 4 lah yang paling SEO karena loading blog bisa tetap terjaga. Selain itu, gambar yang terlalu banyak tidak bagus untuk sebuah web. Jenis ke 3 dan 4 sebaiknya di pasang di bagian credit atau di tempat yang mudah dijangkau. "Back to top" sangatlah penting. Sobat harus bisa menggunakannya dengan kreatifitas. Kedepannya, saya akan coba dengan "Back to top" v2 yaitu dengan melayang. Insya Allah..

Cara Memasang Back to Top di Blog

4/ 5

Oleh belajar blog

belajar blog 3 Komentar