Cara Menambah Link Icon "Top of Page"

Menambahkan Link Icon "Top of Page"

Ketika meriset tentang desain blog, saya seringkali melihat sebuah fitur link icon yang dapat mengembalikan ke bagian atas dari blog bila anda telah berada di akhir artikel. Letak link icon tersebut biasanya berada di sisi kanan. Link Icon sangat berguna untuk memudahkan pengunjung melompat balik ke sisi atas halaman blog anda setelah selesai membaca artikel anda.

Cara menambah link icon ini ternyata sangat mudah dilakukan. Anda cuma menambah kode yang dibutuhkan ke widget HTML/Javascript pada seting layout blog anda.

Saya akan mencoba untuk menjelaskan cara menambah link icon di sisi atas blog anda dengan contoh gambar dan kode yang langsung dapat anda gunakan.

Langkah-Langkah Menambah Link Icon:

Icon biasanya berada di sisi pojok kanan bawah dari halaman (tidak peduli resolusi layar yang pengunjung gunakan untuk mengakses blog anda), dan akan me-link ke target kata yang disisipi dengan simbol "#".

Biasanya saya akan menambahkan title pada gambar icon dengan kata "Back to Top" atau "Kembali ke Atas". Dan ketika pengunjung melewati cursor pada gambar akan tertera dengan jelas bahwa itu adalah link untuk kembali menuju bagian atas blog anda.

Kode yang digunakan untuk ini dibuat seperti ini:

<a href="#"> <-- Link ini adalah target untuk halaman bagian atas anda

<img src="url-of-image" <-- The alamat URL gambar icon yang dipakai

alt="alternative text" <-- Alt text for accessibility

title="Back to Top" <-- Ini akan membuat bila kursor menunjuk ke arah text

style="display: scroll; <-- gambar yang dipakai

position: fixed;<-- This fixes the image in place

bottom: 5px; <-- Buat gambar agar muncul 5 pixel - Makes the image appear 5px from the bottom

right: 5px;" /></a> <-- gambar akan muncul 5 pixel dari sisi kanan from the right, lalu gunakan tag penutup untuk semua kodenya.

Cara Menggunakan Link Icon Top of Page

Untuk menggunakan link icon,silahkan kopi-paste kode berikut ini:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://bloggerbuster.com/images/arrow-up.gif"/></a>

Kustomisasi Link Icon

Jika anda ingin mengganti gambar link icon lama dengan yang baru, tinggal ganti saja alamat URL gambar lama dengan yang baru.

Anda juga dapat menaruh pada posisi yang diinginkan. Contohnya kalau anda ingin icon tersebut tanpa spasi, kopi kode berikut ini:

position: fixed;
bottom: 0px;
right: 0px;

Saya berharap penjelasan cara menambah link icon Top of Page ini cukup berguna dan dapat membantu anda membuatnya sendiri. Jangan lupa untuk berlangganan lewat email untuk update posting terbaru dari Bloggers Holic.

Selamat mencoba,
Bloggersholic